Jquery form submit() 到控制器中的操作然后返回一个对象给客户端而不是重新加载页面

Posted 2023-03-05

【中文标题】Jquery form submit() 到控制器中的操作然后返回一个对象给客户端而不是重新加载页面

【英文标题】：Jquery form submit() to the action in the controller then returns an object to the client and not reload page

【发布时间】：2018-01-04 09:23:13

【问题描述】：

我想要在 jQuery 中调用 submit() 函数之后。它会去action处理逻辑，然后action会返回一个对象给客户端，客户端显示出来。

我尝试了很多方法，但没有，请帮助我。

我有这样的表格：

<form action="/Mycontroller/Save" id="myform" enctype="multipart/form-data" method="post">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
</form> 
<button class="btn btn-success" type="button" onclick="Save()">Save</button>

我想试试 Code Js：

function Save(
  $("#myform").submit(function (eventData, handler) 
    var resultFromAction = ???
    // I would like to get the object from the action returned
  );
)

或者

function Save(
  var resultFromAction =  $("#myform").submit(); 
  // I would like to get the object from the action returned
)

控制器中的代码操作：

public class MyControllerController: Controller 
  [Authorize]
  public ActionResult Save(FormObject formobj) 
    // do something
    var resultForClient = new 
      phone: "098989878",
      name: "john",
      add: "My address"
    ;
    return Json(resultForClient, JsonRequestBehavior.AllowGet);
  

【问题讨论】：

请注意，我的按钮有一个type="button" 而不是type= "submit" 并且在form 标签之外，有一个onclick="Save()" 事件。

请帮帮我

【参考方案1】：

首先，您应该将<button> 放在<form> 中，并将其type 更改为submit：

<form action="/Mycontroller/Save" id="myform" enctype="multipart/form-data" method="post">
  First name:<br />
  <input type="text" name="firstname" value="Mickey"><br />

  Last name:<br />
  <input type="text" name="lastname" value="Mouse"><br /><br />

  <button class="btn btn-success" type="submit">Save</button>
</form> 

然后您可以将事件处理程序直接附加到form 的submit 事件，以使用jQuery 的$.ajax() 方法发送您的AJAX 请求：

$("#myform").submit(function(e) 
  e.preventDefault(); // stop the standard form submission
  $.ajax(
    url: this.action,
    type: this.method,
    data: $(this).serialize(),
    success: function(data) 
      console.log(data); // the object returned from your Action will be displayed here.
    
  );
);

【讨论】：

并且需要将按钮Save包含在form标签中，并将其类型更改为submit。

@mmushtaq OP 在我回答时对其进行了编辑。谢谢你告诉我。

我已经关注了你，我已经在`e.preventDefault();` 行设置了一个断点，但是我没有看到运行到这一行？当然，我没有看到运行成功函数来获取返回的数据，但我看到返回的数据显示在新页面中。我想是因为form标签的post方法？？？

我想我需要在某个地方添加return false;

请帮帮我