JQuery封装的ajax、ajax上传文件、JSON对象、ajax提交表单

怼烎@ 2022-04-05 03:56 390阅读 0赞

JQuery模式的ajax调用  
$(function()\{  
   $('input\[name=username\]').change(function()\{  
    $.ajax(\{  
        type:"post",        //请求方式  
        url:"checkName",    //请求URL地址  
        data:"name="+this.value,//请求的参数  
        success:function(msg)\{  //成功时的处理函数，msg为服务端传回的文本  
            alert(msg);  
        \}  
    \});  
   \})  
\});

多个参数可以用以下方式：  
data:\{  
    name:username,  
    sex:usex,  
    age:uage  
\}

ajax上传文件  
jQuery插件AjaxFileUpload实现ajax文件上传：  
     $.ajaxFileUpload(\{  
            url: 'uploadAjax.htm',   
            type: 'post',  
            secureuri: false,         //一般设置为false  
            fileElementId: 'file',     // 上传文件的id、name属性名  
        allowType:'jpg,jpeg,png,JPG,JPEG,PNG',  //限制文件类型  
            success: function(msg)\{    
                alert(msg);  
            \},  
            error: function(msg)\{   
                alert(msg);  
            \}  
        \});

Json

创建JSON对象  
var str = \{"name":"张三","age":20\};   
JSON对象由 名称/值对组成 名称和值之间用冒号:隔开   
名称必须用双引号" 包含起来   
值可以是任意javascript数据类型，字符串，布尔，数字 ，数组甚至是对象   
不同的名称/值对之间用 逗号 , 隔开

访问JSON对象的属性  
console.log("姓名："+str.name)  
console.log("年龄："+str.age)

创建JSON数组  
var heros=  
\[  
    \{"name":"盖伦","hp":616\},  
    \{"name":"提莫","hp":313\},  
    \{"name":"死歌","hp":432\},  
    \{"name":"火女","hp":389\}  
\]

访问JSON数组  
console.log("第4个英雄是："+heros\[3\].name)

字符串拼接得到一个JSON结构的字符串，并不是一个JSON对象。 需要通过eval转换得到  
var s1 = "\{\\"name\\":\\"盖伦\\"";  
var s2 = ",\\"hp\\":616\}";  
var s3 = s1+s2;  
//eval转换要以（ 开头，）结尾  
var gareen = eval("("+s3+")");  
或者使用JQuery的$.parseJSON转换函数  
$.parseJSON(s3);

json 对象因为是一个javascript对象，所以如果直接打印的话，看不到里面的内容。  
有时候要看看这个对象是不是我们期望的，所以需要通过 JSON.stringify 函数把它转换为 字符串  
var s = JSON.stringify(s3);//s="\{\\"name\\":\\"盖伦\\",\\"hp\\":616\}";

Ueditor富文本编辑器下有个json.jar包  
通过JSONObject（Object bean）和JSONArray(Collection collection )方法，可以将对象和集合转化为json对象  
用ajax接收json对象的时候，需要增加属性dataType:"json"，如下：  
JQuery模式的ajax调用  
$(function()\{  
   $('input\[name=username\]').change(function()\{  
    $.ajax(\{  
        type:"post",        //请求方式  
        url:"checkName",    //请求URL地址  
        data:"name="+this.value,//请求的参数  
        success:function(msg)\{  //成功时的处理函数，msg为服务端传回的文本  
            alert(msg);  
        \}，  
        dataType:"json"  
    \});  
   \})  
\});

Ajax提交表单

表单代码：  
<div id="form-div">  
    <form id="form1" οnsubmit="return false" action="\#\#" method="post">  
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>  
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>  
        <p><input type="button" value="登录" οnclick="login()">&nbsp;<input type="reset" value="重置"></p>  
    </form>  
</div>

ajax代码：  
<script>  
        function login() \{  
            $.ajax(\{  
                type: "POST",        //方法类型  
                dataType: "json",    //预期服务器返回的数据类型  
                url: "/users/login" ,    //url  
                data: $('\#form1').serialize(),  
                success: function (result) \{  
                    console.log(result);//打印服务端返回的数据(调试用)  
                \},  
                error : function() \{  
                    alert("异常！");  
                \}  
            \});  
        \}  
</script>

注意：  
1. οnsubmit="return false"设置不提交  
2. 登陆按钮点击事件：οnclick="login()"  
3. data: $('\#form1').serialize()