jquery ajax局部加载方法详解(实现代码)


Posted in Javascript onMay 12, 2016

在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考。

$.ajax({
     url: "hotelQuery!queryHotelByCity.action",
     type: "post",
     dataType: "html",
     data: "queryHotel.city="+cityobj.value+"&queryHotel.wbcid="+wbcid,
     success: function(data){
      $("#hotellists").html($(data).filter("#list").html());
     }
  });

代码解析:

从上面的代码我们可以看出,返回的数据是data,但是我们如果在要ajax请求的页面的那部分用id为list的一个DIV包围起来,这样我们通过$(data).filter("#list").html()就可以拿到DIV中的HTML内容

实例

$(document).ready(function(){
    function loadMessage()
    {
     $(this).html("loading...");
        var o = this;
        var xmlhttp = $.ajax({
           url:"Service/IndexLogin.aspx",
           dataType:"html",
           success:function(result)
           {
               $(o).html(result);
           }
       });
    }
    loadMessage.call($("#addinfo"));
});

<form action="#" method="post">
   <ul id="addinfo">
    加载中...
   </ul>
</form>

上面我们使用的是的方法,其实还有更简单的办法哦,load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中

$(document).ready(function(){
 $("#addinfo").load("Service/IndexLogin.aspx", $("#addinfo li"));                    })
1. 加载一个php文件,该php文件不含传递参数$("#myID").load("test.php");

//在id为#myID的元素里导入test.php运行后的结果

2.  加载一个php文件,该php文件含有一个传递参数

$("#myID").load("test.php",{"name" : "Adam"});

//导入的php文件含有一个传递参数,类似于:test.php?name=Adam
3.  加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔

$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});

//导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com
4.  加载一个php文件,该php文件以数组作为传递参数

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//导入的php文件含有一个数组传递参数。

以上这篇jquery ajax局部加载方法详解(实现代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
vue实现div单选多选功能
Jul 16 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
Bootstrap组件(一)之菜单
May 11 #Javascript
Bootstrap 组件之按钮(二)
May 11 #Javascript
jQuery验证插件validate使用详解
May 11 #Javascript
JQuery validate插件验证用户注册信息
May 11 #Javascript
jQuery validate验证插件使用详解
May 11 #Javascript
You might like
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
Python 查看文件的读写权限方法
2018/01/23 Python
深入浅析python with语句简介
2018/04/11 Python
为什么称python为胶水语言
2020/06/16 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
物流业务员岗位职责
2014/02/08 职场文书
学习考察心得体会
2014/09/04 职场文书
销售顾问工作计划书
2014/09/15 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
世界名著读书笔记
2015/06/25 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL