javascript 表单提交后是否获得响应?

mzmfm0qo  于 2022-12-10  发布在  Java
关注(0)|答案(3)|浏览(229)

我有一个表单,我定义的html代码如下:

<form id="addUser" method="post" action=@Url.RouteUrl("DefaultApi", new {controller = "User", action = "Add", httproute = "true"})>

我也有提交按钮:

<input type="submit" class="btn btn-primary" value="Add user" />

当我点击按钮时,浏览器会转到API url,但我只是想从api中获取值,并将其传递到页面上的href中。
我怎么能做到呢?

qc6wkl3g

qc6wkl3g1#

根据您在问题中提供的信息,我假设您的web API端点接受表单数据,并返回您的页面应该重定向到的新url。
您可以使用jQuery来劫持表单提交事件,使用 AJAX 发送数据,一旦从Web API调用(新的url)获得响应,就使用它来设置location.href属性的新值,以便浏览器向它发出新的GET请求。
您必须确保阻止正常的表单提交行为,可以使用jQuery preventDefault方法来实现。

$(function(){
  $("[type='submit']").click(function(e){
     e.preventDefault(); 
     var _formUrl=$(this).attr("action");
     //make the ajax call now.
   //Build an object which matches the structure of our view model class
    var model = {  Name: "Shyju", Id: 123 };
    //update the above line with data read from your form.
    $.ajax({
        type: "POST",
        data: JSON.stringify(model),
        url: _formUrl,
        contentType: "application/json"
    }).done(function(res) {       
        console.log('res', res);
        // Do something with the result :)
        window.location.href=res;
    });

  });

});

另请查看How to pass json POST data to Web API method as object

wgmfuz8q

wgmfuz8q2#

首先移除input元素中的form标记和type=submit。然后在javascript中

$(button).click(function(){
$.ajax({
   type:'POST',
   url:/api/User/Add or /User/Add
   success: function(declare parameter that will contain value returned by api)
   {
     // update your href here using the above parameter 
   }
 });
});

希望这对你有帮助...

sy5wg1nm

sy5wg1nm3#

对Daniyals答案进行加法运算,以传递输入值:

data={};
$("input").each(function(elem){
data[elem.name]=elem.value;
});

然后使用下面的代码行执行 AJAX 调用:

data:data,

相关问题