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 常见开发使用技巧总结
Dec 26 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
详解vue axios二次封装
Jul 22 Javascript
小程序实现单选多选功能
Nov 04 Javascript
a标签调用js的方法总结
Sep 05 Javascript
Vue3中的Refs和Ref详情
Nov 11 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中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
js图片无缝滚动插件使用详解
2020/05/26 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
浅析python协程相关概念
2018/01/20 Python
python中logging包的使用总结
2018/02/28 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Flask之请求钩子的实现
2018/12/23 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
小学生新年寄语
2014/04/03 职场文书
母校寄语大全
2014/04/10 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang