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 学习笔记 选择器之四
Jul 23 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
js实现简易聊天对话框
Aug 17 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
vue实现整屏滚动切换
Jun 29 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
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
js实现点赞效果
2020/03/16 Javascript
Python如何快速实现分布式任务
2017/07/06 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
HTML5的革新 结构之美
2011/06/20 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
党员违纪检讨书
2014/02/18 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
小学语文国培感言
2014/03/04 职场文书
起诉书格式范文
2015/05/20 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python