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


Posted in Javascript onFebruary 04, 2014

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

Javascript 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
简单实现js拖拽效果
Jul 25 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
js实现打字小游戏
Dec 17 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
jquery中get和post的简单实例
Feb 04 #Javascript
jquery中$.post()方法的简单实例
Feb 04 #Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 #Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 #Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 #Javascript
解决json日期格式问题的3种方法
Feb 02 #Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 #Javascript
You might like
深入PHP autoload机制的详解
2013/06/09 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
通过C++学习Python
2015/01/20 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python学习教程之使用py2exe打包
2017/09/24 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
法学院方阵解说词
2014/01/29 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
Python基础详解之描述符
2021/04/28 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang