• 使用jQuery的ajax的post与get发送数据到指定url


    针对上一篇JQuery学习中使用JQuery和Prototype整合使JQuery的tab实现局部数据,使用Prototype的Ajax中方法,现在使用JQuery实现同样的功能,如下:

    jquery.js下载地址:http://dl.javaeye.com/topics/download/f961ee8e-24fb-32b5-830a-b18e471e42f9

    jQuery真是个非常强大的类库,今天学习了一下,爱上了,讲下jQuery中ajax使用方法.

    例子:

    test.html

    页面引用<script type="text/javascript" src="jquery.js"></script>

    内容有:

    <div id="my400800">Hello World!</div>
     

    用法1:(页面载入时读取远程页面内容到divMsg)

    $("#my400800").load(http://www.my400800.cn, { "resultType": "html" });

    返回类型resultType有如下几种:

    "xml", "html", "script", "json", "jsonp", "text"

    用法2:(点击post数据返回数据)

    <input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />

    <script type="text/javascript" >

     function ajaxTest()
     {
      $.post("http://www.my400800.cn", { "searchKey": "400电话" },function(data)
      {
       $("#my400800").html(data);
      }
      );
     }

    </script>

    下面是摘自网络的函数:

    post方法如下:

    function test(access_url, tipE){

    $.post(access_url,{
    first: "test1", second: "test2"
    }, function(data){
    if(data.success){
    $('#' + tipE).html('处理成功');
    }else{
    $('#' + tipE).html(data.msg);
    }
    },'json'
    )
    }
     


    如果想用get方法,则把post换为get就可以了,挺简单!

    这个函数中data值为服务端返回的值,且为JSON格式,当然了,这里可以用其他类型,如text,xml等等之类。

    服务端返回值是JSON格式,如:{success:true, msg:"测试成功"}

    AJAX乱码问题

    产生乱码的原因:


    1、xtmlhttp 返回的数据默认的字符编码是utf-8,如果客户端页面是gb2312或者其它编码数据就会产生乱码

    2、post方法提交数据默认的字符编码是utf-8,如果服务器端是gb2312或其他编码数据就会产生乱码

    解决办法有:

    1、若客户端是gb2312编码,则在服务器指定输出流编码

    2、服务器端和客户端都使用utf-8编码

    gb2312:header('Content-Type:text/html;charset=GB2312');

    utf8:header('Content-Type:text/html;charset=utf-8');

    注意:如果你已经按上面的方法做了,还是返回乱码的话,检查你的方式是否为get,对于get请求(或凡涉及到url传递参数的),被传递的参数 都要先经 encodeURIComponent方法处理.如果没有用encodeURIComponent处理的话,也会产生乱码.

    
  • 相关阅读:
    操作系统学习五部曲
    由实模式进入保护模式
    extends && implements
    <mvc:annotation-driven>
    集合类关系
    Servlet8
    SprigMVC基础测试
    (转载)synchronized代码块
    jetty与tomcat
    输入输出流总结
  • 原文地址:https://www.cnblogs.com/jishu/p/1975029.html
Copyright © 2020-2023  润新知