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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
Vue常用指令详解分析
Aug 19 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
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(视频)Http下载
2006/12/12 PHP
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
逐步提升php框架的性能
2008/01/10 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
罗技美国官网:Logitech美国
2020/01/22 全球购物
生产总经理岗位职责
2013/12/19 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
村安全生产责任书
2014/08/25 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python