jq04--jq与ajax
之前我们学习了一些有关jq函数的知识,现在我们看看jq与ajax方面的一些东西:
1.ajax(Asynchronous JavaScript and XML 异步的JavaScript与xml):
在不重载整个网页的情况下,ajax通过发送请求获取后台数据,显示在页面上。注意ajax并不是一种新的编程语言,而是使用现有标准的新方法。
2.jq与ajax:
jq提供多个与ajax有关的方法。通过jQuery AJAX方法,您能够使用HTTP Get和HTTP Post从远程服务器上
请求文本、HTML、XML或JSON,可以把这些外部数据直接载入网页的被选元素中。
如果没有jq,ajax编程并不容易。因为不同的浏览器,ajax的实现方式不一样,这通常意味着我们需要编写
额外的代码对浏览器进行测试。jq已经解决了这个问题,我们只需要一行代码即可进行ajax请求
3.load()方法:
$(selector).load(URL,data,callback);简单而强大的ajax方法,从服务器加载数据,并把返回的数据放入被选元素中
URL: 必选,请求URL
data: 可选,请求参数对象
callback: 可选,回调函数
//把文件"demo_test.txt"的内容加载到指定的<div>元素中
$("#div1").load("demo.txt");
//把文件"demo_test.txt"中id="p1"的元素的内容,加载到指定的<div>元素中
$("#div1").load("demo.txt #p1");
可选的callback回调函数可以设置三个参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("demo.txt",function(responseTxt,statusTXT,xhr){
if("success"==statusTXT){
alert("内容加载成功");
}else if("error"==statusTXT){
alert("Error: "+xhr.status+": "+xhr.statusText);
}
});
});
4.GET与POST:
$.get(URL,callback):
$.post(URL,data,callback):
//$.get()方法从服务器上的一个文件中取回数据
$("button").click(function(){
$.get("demo.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
}
); //ASP文件("demo.asp")类似这样:
<%
response.write("This is some text from an external ASP file.")
%>
//使用$.post()连同请求一起发送数据
$("button").click(function(){
$.post("demo.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
}
);
}); //ASP文件("demo.asp")类似这样:
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
参考链接(get与post的区别):
https://www.cnblogs.com/logsharing/p/8448446.html
5.noConflict():
我们使用$作为jQuery的简写,当其他js框架也使用“$”作为简写时,如何才能避免冲突呢?使用noConflict()方法。noConflict()方法会释放$标识符的控制,这样其他脚本就可以使用它了。
//通过全名替代简写的方式来使用jQuery
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
}); //noConflict()可返回对jQuery的引用,可以把它存入变量,以供稍后使用
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行!");
});
}); //把$符号作为变量传递给ready(),在函数内使用$符号,而在函数外,使用 "jQuery"
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行!");
});
});
jq04--jq与ajax的更多相关文章
- 关于jQ的Ajax操作
jQ的Ajax操作 什么是AJAX AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 它不是一门编程语言,而是利用JavaScript ...
- jq的ajax方法
相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and XML),异步的xml和js对象,主要用于在不刷新全局 ...
- jq使用ajax请求,返回状态 canceled错误
在使用jq,ajax请求时出现该错误 原因:button按钮类型为type=submit ,script中又自定用botton按钮点击提交ajax,造成冲突. 解决方法:button按钮类型改为 ty ...
- 【jQuery】 JQ和AJAX
AJAX AJAX全称异步 JavaScript 和 XML(Asynchronous JavaScript and XML),是一种用于网页前端和网站后台进行数据交互的手段.关于AJAX的详细介绍在 ...
- jq的ajax交互封装
jq封装的ajax,然后 在此前和此后都是很多要考虑的 ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...
- js、jq、ajax之间的关系
一句话:js是一种客户端脚本语言,jq是在js基础上封装起来的一个开发工具,ajax是基于js的一种技术(异步刷新). javascript是一种在客户端执行的脚本语言,用来给网页添加动态功能,使网页 ...
- jq之ajax以及json数据传递
<html> <head><meta http-equiv="Content-Type" content="text/html; chars ...
- AJAX04 JQ的AJAX
一.jQuery中的Ajax 1.jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起Ajax请求 $.post() 以PO ...
- jq+jsonp+ajax解决跨域问题
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...
- angular 和jq 的AJAX的请求区别
最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...
随机推荐
- nullptr(c++11)
1.概念 用字面值常量nullptr来初始化或赋值来得到空指针 2.c++11之前使用NULL或0 1)NULL是一个宏定义(预处理变量),定义在cstdlib中,其值就是0:对于预处理变量,预处理器 ...
- typecho开启pjax,ajax,无刷新
1.引入jquery和pjax 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 https://files.cnblogs.com/files/fan-bk/pjax. ...
- struts1(一)流程分析
- bzoj3262(cdq分治模板)
裸的cdq,注意去重: #include<iostream> #include<cstdio> #include<cmath> #include<cstrin ...
- (概率 01背包) Just another Robbery -- LightOJ -- 1079
http://lightoj.com/volume_showproblem.php?problem=1079 Just another Robbery As Harry Potter series i ...
- TCP、UDP网络通信
IP地址和端口号 端口号是用两个字节(16位的二进制数)表示的,它的取值范围是0~65535,其中,0~1023之间的端口号用于一些知名的网络服务和应用, 用户的普通应用程序需要使用1024以上的端口 ...
- Android webview 退出时关闭声音 4.视频全屏 添加cookie
全屏问题,可以参考 http://bbs.csdn.net/topics/390839259,点击 webView = (WebView) findViewById(R.id.webView); vi ...
- OC语言-block and delegate
参考博客 OC语言BLOCK和协议 iOS Block iOS Block循环引用精讲 iOS之轻松上手block 深入浅出Block的方方面面 Block apple官方参考 1.定义一个block ...
- NoSQL数据库的分布式算法
本文译自 Distributed Algorithms in NoSQL Databases 系统的可扩展性是推动NoSQL运动发展的的主要理由,包含了分布式系统协调,故障转移,资源管理和许多其他特性 ...
- 7.css浮动与定位
外边距塌陷 解决方案: ◆给父盒子加border ◆overflow:hidden; bfc 行内元素可以定义左右的内外边距,上下会被忽略掉. 行内块可以定义内外边距. 文档流(标准流) 元素自上而下 ...