问题

今天碰到个小需求。点击一个按钮,跳转到另外一个页面。这个通常来说很好实现。

思路

第一想法就是window.location.href="url"+"param",但是一看后台,方法如下:

public ActionResult StudentList () {
    string Name = Request.Form["Name"];
    string Sex = Request.Form["Sex"];
    ...
    return View ();
}

是一个学生列表的方法,只能接受POST请求传参。当时想了几种方法。比如:

  1. 修改后台方法为GET请求,在方法的参数列表里面加两个参数。等同于MVC里的控制器方法RedirectToAction,该方法也是使用GET请求。(在项目很大的情况下,改变方法的签名需要改所有引用此方法的地方)
  2. 用Ajax请求,但是请求的结果是一个View,可以使用弹出层显示,但不符合我们跳转的要求。
  3. 模拟form表单提交。这个可行,我们继续深入。
    • 我们可以在页面里添加一个form元素,然后添加相应的参数值
    • 上面的一点的缺点是每个页面都要写不同的form表单,怎么把它动态生成呢。当然就是用js操作dom元素了,封装一个方法。

解决方案

 /**
  * sends a request to the specified url from a form. this will change the window location.
  * @param {string} path the path to send the post request to
  * @param {object} params the paramiters to add to the url
  * @param {string} [method=post] the method to use on the form
  */

 function post(path, params, method) {
     method = method || "post"; // Set method to post by default if not specified.

     // The rest of this code assumes you are not using a library.
     // It can be made less wordy if you use one.
     var form = document.createElement("form");
     form.setAttribute("method", method);
     form.setAttribute("action", path);

     for (var key in params) {
         if (params.hasOwnProperty(key)) {
             var hiddenField = document.createElement("input");
             hiddenField.setAttribute("type", "hidden");
             hiddenField.setAttribute("name", key);
             hiddenField.setAttribute("value", params[key]);

             form.appendChild(hiddenField);
         }
     }

     document.body.appendChild(form);
     form.submit();
 }

现在我们使用这个方法:
post("/Info/StudentList/", { Name: $(this).data("name"),Sex: $(this).data("sex")});

Reference