运用jQuery的ajax方法实现跨域访问

浏览数：44 / 时间：2015年06月09日

前端页面测试代码如下：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    .gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
 
    </style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script>
    
    function testAjax()
    { 
        var name = $("#username").val();
        $.ajax({
                type : "post", 
                url:"xxxxxxxxxx",//正确访问的网址
                data : {
                    name :name
                },
                dataType : "jsonp",
                jsonp : "jsonpCallback",//jsonp 该属性可以不用  该属性的具体应用有待开发 
                success : function(data) { 
                }
            });
    }
    
    function jsonpCallback(result)//该方法名与后台写入response的方法名应相同 
    {
        var callbackMsg = result.msg;
        if (callbackMsg == "ok")
        {
            alert("Test success!");
            $("#form").submit();
        }
        else
        {
            alert(callbackMsg);
        }
    }
    
</script>
</head>
<body>

<div align="center">
<h1>Test</h1>
<form action="" id="form">
    <table class="gridtable">
        <tr><td>Name</td><td><input type="text" id="username" /></td></tr>
        <tr><td><input type="button" value="CONFIRM" onclick="testAjax();"/></td></tr>
    </table>
</form>
</div>
</body>

</html>

服务器端相应测试代码如下：

function test(request, response)
{
    var name = request.getParameter("name");
    if (name == "test")
    {
        response.write("jsonpCallback({msg:‘ok‘})");//方法名jsonpCallback随便起，不过前台取返回值的方法名应与该名相同
    }
    else
    {
        var errMsg = "错误测试";
        response.write("jsonpCallback({msg:‘" + errMsg + "‘})");//方法名jsonpCallback随便起，不过前台取返回值的方法名应与该名相同
    }
}