文档章节

JQuery-Post-Get

完美世界
 完美世界
发布于 2014/06/05 17:09
字数 675
阅读 22
收藏 0
在JQuery中可以使用get,post和ajax方法给服务器端传递数据

get方法的使用(文件):

function verify(){
    //1.获取文本框的数据
    //通过DOM的方式获取
    //(“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方法的使用():

function verify(){
    //1.获取文本框的数据
    //通过DOM的方式获取
    //(“userName”);
    //通过JQuery的方式获取
    var jqueryObj = $(“#userName”);
    //获取节点的值
    var userName = ();
    //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”);
    (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 = ();

//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 = ();

//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 = ();

//获取文本内容

var responseText = ();

$(“#result”).html(responseText);

}

});

}


© 著作权归作者所有

共有 人打赏支持
完美世界
粉丝 10
博文 151
码字总数 134011
作品 0
西城
高级程序员
使用原生的 javascript 来替代 jquery

JSON JQUERY $.getJSON('/my/url', function(data) { }); IE9+ var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (request.st......

蜗牛奔跑
2015/07/01
0
0
jQuery零基础入门——(八)AJAX

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 用JavaScript写AJAX前面已经介绍...

JandenMa
08/06
0
0
很不错的jQuery学习资料和实例

很不错的jQuery学习资料和实例,分享给大家。 这些都是学习Jquery很不错的资料,整理了一下,分享给大家。 希望能对大家的学习有帮助。 帕兰 Noupe带来的51个最佳jQuery教程和实例 , 向大家介...

晨曦之光
2012/03/09
0
0
AngularJS中的$http.post与jQuery.post的区别

很多时候我们需要用ajax提交post数据,angularjs与jq类似,也有封装好的post。 但是jQuery的post明显比angularjs的要简单一些,人性化一些。 AngularJS: $http.post('do-submit.php',myDat...

tommyfok
2014/07/06
0
7
jquery 提交form表单

这个其实挺简单的,只是一开始我想错了,一开始我打算用jQuery + jQuery.form插件来做,其实不必的,只需要jQuery插件就可以了。首先,在jsp页面中导入jQuery, <script type="text/javascr...

背起行囊去远行
2013/03/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Netkiller Java 手札》· 二进制文件操作大全

本文节选自《Netkiller Java 手札》 Netkiller Java 手札 Mr. Neo Chan, 陈景峯(BG7NYT) 中国广东省深圳市望海路半岛城邦三期 518067 +86 13113668890 <netkiller@msn.com> $Id: book.xml 6......

netkiller-
27分钟前
1
0
Fiddler Debugger post请求

常用的两种: 第一种默认的 对应URL为www 的要用请求头为:Content-Type: application/x-www-form-urlencoded 请求参数为 :param1=1234¶m2=12345 注:有些接口是指定用这种的第二方式并不...

轻量级赤影
34分钟前
2
0
如何搭建母婴亲子类知识社区

近期社交领域融资动作频繁,海尔高管、海尔医疗有限公司总裁管礼庆创办的母婴知识分享社区平台Alwayslove于上月获得700万天使轮融资。 Alwayslove是一个母婴知识分享社区平台,采用UGC模式,...

ThinkSNS账号
36分钟前
1
0
Android 自定义构建类型 BuildType

最近接触到自定义构建类型 BuildType,发现这一块有些地方稍不注意的话会被绕进去浪费点时间,既然我这边已经花费时间了,如果正好你也需要接触到 BuildType,也许接下来分享的 tips 可能会帮...

猴亮屏
37分钟前
1
0
美团点评基于 Flink 的实时数仓建设实践

引言 近些年,企业对数据服务实时化服务的需求日益增多。本文整理了常见实时数据组件的性能特点和适用场景,介绍了美团如何通过 Flink 引擎构建实时数据仓库,从而提供高效、稳健的实时数据服...

美团技术团队
41分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部