好资源导航 » 文章资讯 » jQuery实现简单的Ajax调用功能示例

jQuery实现简单的Ajax调用功能示例

2023-08-28 23:26:05 66

本文实例讲述了jQuery实现简单的Ajax调用功能。分享给大家供大家参考，具体如下：

这里的jQuery调用为CDN地址：//cdn.bootcss.com/jquery/3.3.1/jquery.min.js

jQuery确实方便，下面做个简单的Ajax调用：

建立一个简单的html文件：






$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//取Ajax返回结果
//为了简单，这里简单地从文件中读取内容作为返回数据
htmlobj=$.ajax({url:"/Readme.txt",async:false});
//显示Ajax返回结果
$("#myDiv").html(htmlobj.responseText);
});
});



通过AJAX改变文本

Ajax改变内容

好了，点击按钮就可以看到效果了。

当然，jQuery的Ajax调用可以控制项很多，这里演示了简单的调用。

注意你自己的jquery引用路径。

好吧，做一个调用后台的例子：






$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//Ajax调用处理
varhtml=$.ajax({
type:"POST",
url:"test.php",
data:"name=garfield&age=18",
async:false
}).responseText;
$("#myDiv").html(''+html+'');
});
});



通过AJAX改变文本

Ajax改变内容

后台test.php文件代码：


当然，我们还可以这样来调用Ajax:





$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//Ajax调用处理
$.ajax({
type:"POST",
url:"test.php",
data:"name=garfield&age=18",
success:function(data){
$("#myDiv").html(''+data+'');
}
});
});
});



通过AJAX改变文本

Ajax改变内容

注意：

success:function(data)

中的data参数可以改为别的名称，比如success:function(msg)，msg(data)为返回的数据。此处为回调函数的参数，而非

data:"name=garfield&age=18"

中的Ajax调用中的data参数。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jQuery实现简单的Ajax调用功能示例

通过AJAX改变文本

'+html+'

通过AJAX改变文本

'+data+'

通过AJAX改变文本

热门推荐

随机推荐