post和ajax方法的使用小结,getJSON的解决方法
分类:关于美高梅

复制代码 代码如下:

在JQuery中得以应用get,post和ajax方法给劳务器端传递数据

jQuery中通过ajax的get()函数读取页面包车型客车艺术,jqueryajax

先是介绍get()函数:

url,[data],[callback],[type]

参数表明:
url:待载入页面的U昂CoraL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:再次来到内容格式,xml, html, script, json, text, _default。
先是成立testGet.php实例:

<?php
$web = $_GET['webname'];
echo "你现在访问的网站是:".$web;
?>

然见创设ajax.html文件:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>php点点通 - 关注php开发,提供专业web开发教程! </title>
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
  $("#btn").click(function(){
   $.get("testGet.php",{web:"www.phpddt.com"},function(data,textStatus){
    $("#result").append("data:"+data);
    $("#result").append("<br>textStatus:"+textStatus);
   });  
  });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下:</h2>
<div id="result"></div>
</body>
</html>

测量检验前的先导页面是:

图片 1

点击测验后的结果是:

图片 2

  前几天在写一DEMO,当中使用了jQuery的$.getJSON方法,写完后发觉全部DEMO中用到jQuery中的就那二个地点,但要引进贰个jQuery实在不划算,于是就融洽达成了贰个简易版的,基本可以知足供给,现共享出去:

function verify() {
var jqueryObj = $("#username");
var username = jqueryObj.val();

get方法的行使(customForGet.js文件):

您大概感兴趣的篇章:

  • jQuery Ajax之$.get()方法和$.post()方法
  • jquery 读取页面load get post ajax 各类方法代码写法
  • Jquery Ajax的Get格局时索要潜心UTucsonL地点
  • jquery用get完毕ajax在ie里面刷新不进来后台消除措施
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总括
  • Jquery AJAX POST与GET之间的区分
  • jquery的ajax和getJson跨域获取json数据的落到实处方式
  • jquery中get,post和ajax方法的行使小结
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery+ajax中getJSON() 用法实例
  • jQuery中ajax的get()方法用法实例
  • jQuery中Ajax的get、post等办法详解
  • Jquery中ajax提交表单两种艺术(get、post三种艺术)
  • jQuery中ajax - get() 方法实例详解
  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

首先介绍get()函数: url,[data],[callback],[type] 参数表明: url:待载入页面包车型客车UPolestar 1L地址 data:待发...

复制代码 代码如下:

//var url = "servlet/UserInfo?username=" + encodeURI(encodeURI(username));
var url = "servlet/UserInfo?username=" +username;

function verify(){
//1.得到文本框的数据

var $ = {
    getJSON: function(url, params, callbackFuncName, callback){
        var paramsUrl ="",
            jsonp = this.getQueryString(url)[callbackFuncName];
        for(var key in params){
            paramsUrl+="&"+key+"="+encodeURIComponent(params[key]);
        }
        url+=paramsUrl;
        window[jsonp] = function(data) {
            window[jsonp] = undefined;
            try {
                delete window[jsonp];
            } catch(e) {}

//注意这里由于ie接纳缓存技艺,对于同一url,只有首先次回调用后台,现在访谈的正是其一缓存

//通过DOM的法子赢得
//document.getElementByIdx("userName");
//通过JQuery的主意获得
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();

            if (head) {
                head.removeChild(script);
            }
            callback(data);
        };

//这里丰盛岁月戳,就足以棍骗一下ie,每一遍都能够访问后台了,^_^

//2.将文本框的多寡发送到服务器端的servlet
$.get("AJAXServer?name=" + userName,null,callback);
}
//回调函数
function callback(data){

        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.charset = "UTF-8";
        script.src = url;
        head.appendChild(script);
        return true;
    },
    getQueryString: function(url) {
        var result = {}, queryString = (url && url.indexOf("?")!=-1 && url.split("?")[1]) || location.search.substring(1),
            re = /([^&=]+)=([^&]*)/g, m;
        while (m = re.exec(queryString)) {
            result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
        }
        return result;
    }
};

url = convertURL(url);
$.get(url, null, callback);
}

//3.收受从服务器端返回的数额
// alert(data);
//4.将劳动器端的回来的多寡显示到页面上
//取到用来呈现结果音讯的节点
var resultObj = $("#result");
resultObj.html(data);
}

  调用DEMO如下:

function callback(data) {
alert(data);
$("#userInfo").html(data);
}
function convertURL(url) {
var timestamp = new Date().valueOf();

能够将下面的文本简写成:
function verify(){
$.get("AJAXServer?name="+$("#userName").val(),null,function callback(data){$("#result").html(data);});
}

复制代码 代码如下:

if (url.indexOf("?") > 1) {
url = url + "&t=" + timestamp;
} else {
url = url + "?t=" + timestamp;
}
return url;
}

post方法的行使(customForPost.js):

var url = "";
var params = {
    a:1,
    b:2
};
$.getJSON(url, params, "callback", function(data){
    //todo
});

你也许感兴趣的稿子:

  • jQuery Ajax之$.get()方法和$.post()方法
  • jquery 读取页面load get post ajax 种种方法代码写法
  • Jquery Ajax的Get格局时需求小心ULANDL地方
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法计算
  • Jquery AJAX POST与GET之间的区分
  • jquery的ajax和getJson跨域获取json数据的得以实现情势
  • jquery中get,post和ajax方法的利用小结
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery+ajax中getJSON() 用法实例
  • jQuery中ajax的get()方法用法实例
  • jQuery中Ajax的get、post等办法详解
  • Jquery中ajax提交表单二种艺术(get、post三种情势)
  • jQuery中ajax - get() 方法实例详解
  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
  • jQuery中经过ajax的get()函数读取页面包车型客车主意

function verify(){
//1.获得文本框的数码

你大概感兴趣的稿子:

  • JQuery 获取json数据$.getJSON方法的实例代码
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总括
  • jquery $.getJSON()跨域央浼
  • Jquery getJSON方法详细剖析
  • jQuery+ajax中getJSON() 用法实例
  • JQuery中getJSON的应用办法
  • jQuery getJSON 管理json数据的代码
  • JQuery中的$.getJSON 使用表达
  • ie下jquery.getJSON的缓存难点的拍卖方法
  • jQuery中$.ajax()和$.getJson()同步管理详解
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery使用getJSON方法赢得json数据完整示例

//通过DOM的措施获得
//document.getElementByIdx("userName");
//通过JQuery的不二等秘书技获取
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();

//2.将文本框的数量发送到服务器端的servlet
  // $.post("AJAXServer?name=" + userName,null,callback);//用post是也足以一贯将参数跟在U福特ExplorerL后边
$.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);
}
});
}

您恐怕感兴趣的篇章:

  • jQuery中ajax的load()与post()方法实例详解
  • jQuery中ajax - get() 方法实例详解
  • jquery 读取页面load get post ajax 各类办法代码写法
  • jQuery中Ajax的get、post等艺术详解
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总括
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery中ajax的get()方法用法实例
  • jQuery中ajax的load()方法用法实例
  • 详谈jQuery Ajax(load,post,get,ajax)的用法

本文由美高梅网址发布于关于美高梅,转载请注明出处:post和ajax方法的使用小结,getJSON的解决方法

上一篇:相册集效果,animate实现鼠标放上去显示离开隐藏 下一篇:没有了
猜你喜欢
热门排行
精彩图文