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 ...
随机推荐
- vue +bootstrap 写的小例子
最近vue挺火,最近也不是特别忙,就学习了下. vue和angular非常像都是MVVM.道理都是想通的,就是语法的差异 我觉得vue和angular区别: 1.vue更轻,更便捷,适用于移动开发 2 ...
- HTTP协议(一)[草稿版]
(一)HTTP客户端请求头格式
- weat!!团队
摘要: 团队名称:weat!! 团队成员:刘波 崔和杰 简介: 刘波:性别男,爱好:动漫,徒步旅行.在组内负责程序编写这一部分. 优点:认真负责,不懂就会去问. 崔和杰:性别男,爱好:篮球.在组内负责 ...
- Html5与Css3知识点拾遗(一)
1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...
- java基础-day21
第10天 IO流 今日内容介绍 u 标准输入流 & 转换流 & 打印流 u 对象操作流 u Properties集合 第1章 标准输入流 & 转换流 & 打 ...
- java基础-day12
第01天 java面向对象 今日内容介绍 u 知识回顾 u static静态关键字 u 代码块 第1章 知识回顾 1.1 方法的回顾 1.1.1 案例代码一: package co ...
- listview 嵌套checkbox响应item点击和button点击事件
参考文档 http://www.eoeandroid.com/forum.php?mod=viewthread&tid=182280 一.主要要点 1. CheckBox的优先级比item高. ...
- 最长上升子序列 and 最长公共子序列 问题模板
两种求最长上升子序列问题 第一种:定义dp[i]=以a[i]为末尾的最长上升子序列问题的长度 第二种:定义dp[i]=长度为i+1的上升 子序列 中末尾元素的最小值 #include <cstd ...
- 9.DataGrid数据表格
后台获取数据并将其转换为json数组格式: 前台获取数据并显示在数据表格中:
- Java 是值传递
本质:传值/传地址值 以下搬运自知乎大佬 作者:Intopass链接:https://www.zhihu.com/question/31203609/answer/50992895来源:知乎著 ...