JQuery的get、post和ajax方法的使用

在JQuery中可以使用get,post和ajax方法给服务器端传递数据

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);

}
});

}

时间: 2024-10-31 17:26:03

JQuery的get、post和ajax方法的使用的相关文章

JQuery系列(4) - AJAX方法

jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.ajax(url[, options]) $.ajax([options]) 上面代码中的url,指的是服务器网址,options则是一个对象参数,设置Ajax请求的具体参数. $.ajax({ async: true, url: '/url/to/json', type: 'GET', data :

Jquery jqXHR对象的属性和方法

在 jQuery 1.4 之前(包括1.4),$.ajax() 方法返回的是浏览器原生的 XMLHttpRequest 对象. 从 jQuery 1.5 开始,$.ajax() 方法返回 jQuery 自己的 XMLHttpRequest 对象(一般简称jqXHR).之所以这样做,是因为 jQuery 1.5 引入了延迟对象 jQuery.Deferred,以便于更好地处理和执行回调函数. 你可以简单地理解为 jqXHR 对象是 jQuery 自己伪造的一个 XMLHttpRequest 对象和

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=

jQuery AJAX 方法

jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象

jquery中页面Ajax方法$.load的功能

load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequest)); 可以做到加载一个页面的时候,如果发生错误,根据statusText给出的状态,显示对应的提示,这对用户来说非常重要. 例子,load post 代码如下 复制代码 <div id=btnAjaxPost>点击我</div><div id=divResult>内

Jquery在unload中成功调用Jquery的.ajax方法

因为页面要求,需要在页面跳转的时候做一些数据的保存工作,试了很多次,发现Jquery的unload事件中调用.ajax方法,在FireFox中可以顺利执行,但是在Chromium下却返回了textStatus为error的消息.试验过很多方法,例如在页面离开时弹出确认框,这样虽然返回了error消息,但是数据库显示操作执行完毕.将确认框除去后,数据库依然没有响应. 查阅多方资料后,发现是以为.ajax的异步响应问题,把ajax请求改为同步的,问题解决. 代码如下: 1 $(window).unl

封装一个类似jquery的ajax方法

//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataType:"json"/"jsonp", // url:"地址", // data:{key:value} // success:function(){ // } // } //还需要一个跨域方法,可以访问远程服务器的数据 function myAja