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里面的？后面的变量值。