zoukankan      html  css  js  c++  java
  • jQueryAjax

    一、jQuery-Ajax参数说明

    $.ajax(prop) 通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传递的key/value有以下几种

    (String)type:数据传递方式(get或post)

    (String)url:数据请求页面的url

    (String)data:传递数据的参数字符串,只适合post方式

    (String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")

    (Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是false

    (Number)timeout:设置时间延迟请求的时间

    (Boolean)global:是否为当前请求触发ajax全局事件,默认为true

    (Function)error:当请求失败时触发的函数

    (Function)success:当请求成功时触发函数

    (Function)complete:当请求完成后出发函数

    二、jQuery中实现Ajax的3种方法(post,get,ajax)

    //------------------post--------------------------------------------------------------------

    $('#input1').click(function(){
       $.post(

       'ajax.ashx',

       {username:$("#username").val()},
       function(data){

       var myjson='';
       eval("myjson="+data+";");

       $("#content_post").html('post区'+myjson.username);
       }

       );

    );

    //-------------------get--------------------------------------------------------------------


    $('#input2').click(function(){
       $.get('ajax.ashx',{username:$("#username").val()},
       function(data){

       var myjson='';
       eval("myjson="+data+";");

       $("#content_get").html("get区"+myjson.username);
       });
    });

    //-------------------ajax-------------------------------------------------------------------


        $('#input3').click(function(){
        var params=$('#username').serialize();
          $.ajax({
            url :'ajax.ashx',
            type:'get',
            dataType:'json',
            data:params,
            error:update_page,
            success:update_page
            });
        });
    });
    function update_page (json) {
        var str="ajax区:"+json.username+"<br />";
        $("#content_ajax").html(str);
       }
    </HEAD>

    <BODY>
    <div id="content_post" style="background:orange;border:1px solid red;410px;height:50px;">post区:</div>
    <div id="content_get" style="background:orange;border:1px solid red;410px;height:50px;">get区:</div>
    <div id="content_ajax" style="background:orange;border:1px solid red;410px;height:50px;">ajax区:</div>
    <form>
    <input type="text" id="username" name='username'/>
    <input type="button" id='input1' value="post提交"/>
    <input type="button" id='input2' value="get提交"/>
    <input type="button" id='input3' value="ajax提交"/>
    </form>
    </BODY>
    </HTML>

    三、相同url缓存问题的解决

    对于get请求:

    url = "someurl.php?id=123";

    url += "&anticache=" + Math.floor(Math.random()*1000);

    $.get(url);
    对于post请求:

    parms = {  

     id : "123",  

    anticache : Math.floor(Math.random()*1000)

    };

    $.post("someurl.php", parms);

    四、JQuery.ajax传递中文参数乱码的解决方法 

    解决方案:

    var data = {    
     UserName: escape(your user name here),    
     Password: escape(your password here),};
    var jsonStr = JSON.stringify(data);  // 
    the json2 method.$.ajax({    
     url: '../Service.asmx/Login', 
    data: 'userinfo=' + jsonStr,     
    contentType: "application/json; charset=utf-8",     
    dataType: "jsonp",     
    type: "GET",    
     success: function(response) {          …     },     
    error: function(a, b, c) {          …     }}
    );

    这个方案就是使用javascript的escape方法来对中文字符进行编码,然后到WebService那里会自动解码成为中文。
    第二个问题:用JQuery Ajax GET传送瑞典字符等Unicode字符出现乱码,即便是用了escape也无济于事。
    通过GET方法发送的请求实际上还是通过URI来传送参数的,那么GET方式传送的字符就与文件设定的编码格式无关了,完全是由URI来决定传送的是什么,那么如果对URI进行编码呢?
    事实上,javascript已经有这样的全局函数来实现对URI的编码了:encodeURI(uri),让JQuery Ajax发送一个由URI编码好的数据就不会出现乱码了,而且在WebService端还能自动对数据进行decode.
    改善后的代码如下:

    var data = {    
     UserName: encodeURI(your user name here),    
     Password: encodeURI(your password here),};
    var jsonStr = JSON.stringify(data);  // 
    the json2 method.
    $.ajax({     
    url: '../Service.asmx/Login',     
    data: 'userinfo=' + jsonStr,     
    contentType: "application/json; charset=utf-8",     
    dataType: "jsonp",     
    type: "GET",     
    success: function(response) {          …     },     
    error: function(a, b, c) {          …     }}
    );

    这个改进后的方案不仅仅对中文字符有效,而且对其他的Unicode字符都可以有效的解决乱码问题。

  • 相关阅读:
    彻底理解 Python 生成器
    Windows上虚拟环境的安装及使用
    github怎么绑定自己的域名
    解决ImportError: cannot import name HTTPSHandler
    服务器(Linux) 安装python3
    函数的参数(必选,默认,可变,关键字)
    python 异常处理(try...finally...和with...as 方法)
    LeetCode 33. 搜索旋转排序数组 | Python
    LeetCode 46. 全排列
    LeetCode 面试题51. 数组中的逆序对
  • 原文地址:https://www.cnblogs.com/linzheng/p/1832038.html
Copyright © 2011-2022 走看看