jquery中get,post和ajax方法的使用小结_jquery

get方法的使用（customForGet.js文件）：

function verify(){
//1.获取文本框的数据

//通过DOM的方式获取
//document.getElementByIdx("userName");
//通过JQuery的方式获取
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();

//2.将文本框的数据发送到服务器端的servlet
$.get("AJAXServer?name=" + userName,null,callback);
}
//回调函数
function callback(data){

//3.接受从服务器端返回的数据
// alert(data);
//4.将服务器端的返回的数据显示到页面上
//取到用来显示结果信息的节点
var resultObj = $("#result");
resultObj.html(data);
}

可以将上面的文件简写成：
function verify(){
$.get("AJAXServer?name="+$("#userName").val(),null,function callback(data){$("#result").html(data);});
}

post方法的使用（customForPost.js）：

function verify(){
//1.获取文本框的数据

//通过DOM的方式获取
//document.getElementByIdx("userName");
//通过JQuery的方式获取
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();

//2.将文本框的数据发送到服务器端的servlet
// $.post("AJAXServer?name=" + userName,null,callback);//用post是也可以直接将参数跟在URL后面
$.post("AJAXServer",{name:userName,test:"test123"},callback);//传递多个参数时用逗号隔开，属性值如果是变量的话直接写上，如：userName，如果是字符的话要加上引号，如：“test123”.
}
//回调函数
function callback(data){

//3.接受从服务器端返回的数据
// alert(data);
//4.将服务器端的返回的数据显示到页面上
//取到用来显示结果信息的节点
var resultObj = $("#result");
resultObj.html(data);
}

可以将上面的文件简写成：
function verify(){
$.post("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)});
}

总结：其实get和post方法相似，只要将get和post互换即可，而参数的存放位置两个地方都行；

如：

$.post("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)});

只要将post直接改成get，而不用修改参数的位置，即：

$.get("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data)});

ajax方法的使用（customForAjaxText）接收数据类型是纯文本的数据：

function verify(){
//1.获取文本框的数据
//通过JQuery的方式获取
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();

//2.将文本框的数据发送到服务器端的servlet
$.ajax({
type:"POST",
url:"AJAXServer",
data:"name="+userName+"&"+"test=123",
success:function(data){
$("#result").html(data);
}
});
}

ajax方法的使用（customForAjaxText）接收数据类型是XML的数据：

function verify(){
//1.获取文本框的数据
//通过JQuery的方式获取
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();

//2.将文本框的数据发送到服务器端的servlet
$.ajax({
type:"POST",
url:"AJAXXMLServer",
data:"name="+userName+"&"+"test=123",

dataType:"xml",
success:function(data){
//首先需要将传过来的DOM对象转化为jquery对象
var jqueryObj = $(data);
//获取message节点
var messageNods = jqueryObj.children();
//获取文本内容
var responseText = messageNods.text();
$("#result").html(responseText);
}
});
}

尚纳游戏还为您提供以下相关内容希望对您有帮助：

.get 主要用于处理简单的 GET 请求功能，替代了复杂的手动调用 $.ajax。当请求成功时，可以使用回调函数来处理结果，但如果需要处理请求失败的情况，则必须使用 $.ajax。$.get 方法在请求时会自动生成 queryString，提交给服务器（例如：name=John&time=2pm）。相比之下，$.post 专门用于处理 POST

1. 封装层级与功能定位$.ajax是jQuery底层AJAX实现的通用封装，支持所有HTTP请求类型（GET、POST、PUT等），并提供完整的回调函数体系，包括beforeSend、error、success、complete等。而$.post是针对POST请求的高层封装，仅支持POST方法，简化了参数配置，隐藏了底层细节，适合快速发起POST请求。2. 回调函数支...

一、jQuery中的Ajax请求通过图书管理系统案例，学习了以下内容：发起请求：使用get方法发起GET请求获取数据。使用post方法提交数据到服务器。使用ajax方法发起GET和POST请求，灵活性更高。图书管理系统实现：页面制作：使用Bootstrap制作前端页面。获取图书列表：发送GET请求获取数据，手动拼接HTML字符串并插入到tbo...

1 对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经encodeURIComponent方法处理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent (content)+"&id=1" ;使用Post方式需注意：1.设置header的Context-Type为application/x-www-form...

在jquery 中使用ajax方式进行异步调用有3种方式：$.post、$.get、$.ajax.其中$.post、$.get是封装的$.ajax方法。处理一些较为简单的ajax请求，参数少的情况。如果遇到复杂数据传输，或者对传输配置参数需要定义，就需要$.ajax了。一、$.ajax的一般格式 .ajax({ type: 'POST',url: url ,data: ...

]对象，编写专属选择器。DOM操作优化缓存jQuery对象：频繁操作的元素需缓存，例如var $element = $('.target')。批量DOM插入：在内存中构建完整结构后一次性插入，避免多次操作。检查对象存在性：操作前验证对象是否存在，避免执行无用函数。使用直接函数：如.ajax()替代.get()、.post()等封装方法，减少...

('#content').load(url);load是jQuery原型的方法，只能用在jQuery对象上。并且返回的数据可以是任何文本类型，同时会把数据写入jQuery对象中，相当于先$.get然后再$('#content').html 然后$.get和$.getJSON这两种方法都是基于$.ajax扩展出的简略方法。.get只是指定了AJAX的请求方式是GET。相当于$....

jquery ajax get是用来发送get请求给服务器的，具体用法如下：get() 方法通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。语法 (selector).get(url,data,success(response,status,xhr),data...

代码：.ajax({ type: "POST",url: "getPageDate.php", //调用的php文件 data: "page=1",success: function(msg){ //回调函数 alert( "Data Saved: " + msg ); //这里是操作 ("#content").html();} });success:function(data){//后台处理数据成功后的回调函数 // 在这里执行对...

.get("test.cgi", { name: "John", time: "2pm" },function(data){ alert("Data Loaded: " + data);});3. 通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。实例：.post("/...