你的位置:首页 > Java教程

[Java教程]JavaScript的ajax与jQuery的ajax案例分析


先谈JavaScript的ajax,传输数据为json

#############################################JavaScript ajax json###########################################

注意:由于要用到json的JSON.stringify()方法,需要引入json2.js库。

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        div {
            width: 300px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #ED7AE0;
            border-radius: 4px;
            padding: 15px;
        }
        input {
            margin: 0 auto;
            display: block;
            margin-top: 15px;
            width: 150px;
            border-radius: 5px;
            height: 24px;
            border: 1px solid #40F3E6;
        }
    </style>
    <script src="json2.js"></script>
    <script src="index.js" defer="defer"></script>
</head>
<body>
    <div>
        <input type="text" required="true"  name="" id="un"
        placeholder="UserName" />
        <input type="text" required="true"  name="" id="pw" placeholder="Password" />
        <input type="submit" name="" value="submit" id="sb" />
    </div>
</body>
</html>

index.js

window.onload = function(){
    (document.getElementById("sb")).onclick = function(){
        var url = ""  //填入后台文件路径
        var data = {
            userName : document.getElementById("un").value,
            password : document.getElementById("pw").value
        }
        var jsonData = JSON.stringify(data); //将data对象转换为json字符串
        ajax(url, jsonData);
    }
}
function ajax(url, data) {
    var oajax = null;
    try{
        oajax = new     }catch(xhrError){
        alert("your brower isn't supporting     }

    try{
        oajax = new ActiveXObject("Microsoft.    }catch(activeError_Microsoft_        alert("your brower isn't supporting ActiveXObject!");
    }
    oajax.open("POST", url, true);
    oajax.send(data);
    oajax.onreadystatechange = function(){
        if(oajax.readyState == 4) {
            if(oajax.status == 200) {
                //后台返回数据操控view层
            }
        }
    }
}

##########################################jQuery ajax json################################################

引入jQuery库和json2.js

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        div {
            width: 300px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #ED7AE0;
            border-radius: 4px;
            padding: 15px;
        }
        input {
            margin: 0 auto;
            display: block;
            margin-top: 15px;
            width: 150px;
            border-radius: 5px;
            height: 24px;
            border: 1px solid #40F3E6;
        }
    </style>
    <script src="json2.js"></script>
    <script src="index.js" defer="defer"></script>
</head>
<body>
    <div>
        <input type="text" required="true"  name="" id="un"
        placeholder="UserName" />
        <input type="text" required="true"  name="" id="pw" placeholder="Password" />
        <input type="submit" name="" value="submit" id="sb" />
    </div>
</body>
</html>

test.js代码:

$(document).ready(function(){
    $("#sb").click(function(){
        var route = ""; //数据传输到文件
        var $content = {
            userName: $("#un").val(),
            password: $("#pw").val()
        }
        var content = JSON.stringify($content);
        alert(content);
        $.ajax({
            type: "POST",
            url: route,
            data: content,
            dataType: 'json',
            success:function(data){

            }
        });
    });
});