WEB页面的数据交互

做WEB开发经常遇到的问题时前台后台的数据交互问题，这里简单介绍一下Ajax的用法。除此之外还有get，post的表单提交传值等方式，这里简单的介绍一下他们的用法。

• get方式
• post方式
• Ajax方式

---

1. get方式

前台代码：

<form method="get">
    <p>First Name: <input type="text"name="fname" /></p>    
    <p>Last Name: <input type="text" name="lname" /></p>
    <input type="submit" value="Submit" />
</form>

后台代码：

protected void Page_Load(object sender, EventArgs e){
    string ffname = Request["fname"];
    string llname = Request["lname"];
}

2. post方式
同理，post方法类似，前台代码：

<form method="post">
    <p>First Name: <input type="text"name="fname" /></p>    
    <p>Last Name: <input type="text" name="lname" /></p>
    <input type="submit" value="Submit" />
</form>

后台代码：

protected void Page_Load(object sender, EventArgs e){
    string ffname = Request["fname"];
    string llname = Request["lname"];
}

3. Ajax方式
函数形式：

function myAjax(data, url, successFun, errorFun) {
    var o = {
        data: data,
    };
    $.ajax({
        data: JSON.stringify(o),
        type: "Post",
        url: url,
        contentType: "application/json; charset=utf-8",
        success: successFun,
        error: errorFun,
    })
}

这里，myAjax函数里面的四个传入值分别是
data：要传的数据
url：要传的路径，具体到函数，一般用相对路径
successFun：传值成功的回调函数
errorFun：传值失败的回调函数

调用时，具体代码实例：

var url = "../BasestartPage.aspx/postToFrontend";
        myAjax("test", url, function (data) {
            var answer = JSON.parse(data.d);
        }, function () {
            alert("error");
        });

其中，postToFrontend是具体的后台函数，用来接收客户端传来的数据，传给服务端的是一个字符串，可以看出，我是以json序列化的方式传给服务端。

后台的函数：

[WebMethod]
public static string postToFrontend(string data)
{
    return new JavaScriptSerializer().Serialize(data);
}

服务端传来的值也是经过序列化的，所以前台有个JSON.parse来反序列化得到相应的对象。

注意事项：

• myAjax函数传的对象里面的属性值是什么，后台代码接收的参数也必须以一一对应。
• 后台的接收函数必须有[WebMethod]标签。
• 序列化是一个很好的数据预处理方式。
• Ajax是异步传值的。

以上所讲都是前台后台之间的数据交互，如果页面之间存在交互时改怎么办呢？

前台js示例代码：

window.open("../statisticsPage/statisticsPage.aspx?voteid=" + id);

这里传了一个voteid的值。打开另一个网页时，网页的URL后面会有 ”？voteid=** “的显示，说明这里用的是get方法传给另一个页面的，这时候，我们既可以在另一个页面的后台用上面所说的get接收方法来接收，也可以用下面的方法来接收数据。

另一个界面的js代码：

//获取URL中参数param的值
function getParameter(val) {
    var uri = window.location.search;
    var re = new RegExp("" + val + "\=([^\&\?]*)", "ig");
    return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
}

getParameter(voteid)//这里就是voteid的值

这里用的是一个正则表达式来匹配URL里面的？后面的变量值。