2017-07-08 78 views
0

我已经创建了用于使用Ajax工作正常的自定义表中保存数据的代码。保存在php后在WebAPI上发布数据使用ajax

之后,我想使用js/jQuery将这些数据发布到asp.Net API上。我如何在aps.net上发布相同的数据。

这是我的HTML表单和JS代码:

<div id="inline1" class="audit-form" style="display: none;"> 
    <form class="infusion-form" id="infusion-form"> 
    <h3 style="color: #002046;">Sign Up For a Free Capability Audit </h3> 
    <div class="dis_block clearfix"> 
    <div class="form-group"> 
     <label>First Name *</label> 
     <input required class="form-control" id="inf_field_FirstName" name="inf_field_FirstName" type="text" /> 
    </div> 
    <div class="form-group"> 
     <label>Last Name *</label> 
     <input required id="inf_field_LastName" name="inf_field_LastName" type="text" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label>Email *</label> 
     <input required id="inf_field_Email" name="inf_field_Email" type="email" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label>Confirm Email *</label> 
     <input required id="inf_field_Phone1" name="inf_field_Phone1" type="email" class="form-control" /> 
    </div> 
    <div class="form-group" style="text-align: center;"> 
     <input type="hidden" name="action" value ="save_procurement_data" /> 
     <input type="submit" id="frm_basic_info" class="btn custom-btn" value="NEXT" /> 

    </div> 
    </div> 
    </form> 
    </div> 

JS代码是在这里

<script type = "text/javascript"> 
jQuery(document).ready(function() { 

    jQuery(document).on('click', '#frm_basic_info', function(e){ 
    jQuery("#infusion-form").validate({ 
     rules: { 
     inf_field_FirstName: "required", 
     inf_field_LastName: "required", 
     inf_field_Email: "required", 
     inf_field_Phone1: { 
      equalTo: inf_field_Email 
     } 
     }, 
     messages: { 
     inf_field_FirstName: "Please enter your firstname", 
     inf_field_LastName: "Please enter your lastname", 
     inf_field_Email: "Please enter your email", 
     inf_field_Phone1: "Please enter your confirm email correct", 
     }, 
     submitHandler: function (form) { 

     e.preventDefault(); 
     var frmd = new FormData(); 

     var save_data = jQuery('form').serializeArray(); 
     jQuery.each(save_data,function(key,input){ 
      frmd.append(input.name,input.value); 
     }); 
     jQuery.ajax({ 
      url: '<?php echo admin_url('admin-ajax.php'); ?>', 
      data: frmd, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      success: function(data){ 
      alert(data); 
      return false; 
      //window.location.href = "<?php echo site_url(); ?>/about-your-organization"; 
      } 
     }); 
     } 
     }); 
    }); 

}); 
</script> 

在警告我得到警报data saved success fully

+0

你在代码中调用Web Api的位置? –

回答

0

保存在你的php Url后,只需添加一个更多的ajax方法。

看,你的上述AJAX的成功方法,检查状态,然后发布到Asp.Net网络API,就像我的娄代码,

success: function(data){ 
     //Here you can check the data and call your Web Api. For example 
     if(data == "data saved success fully") 
     { 
     //Write an ajax method to post data to Web Api 
     $.ajax({ 
      url: 'YourWebApiUrlHere', 
      data: frmd, 
      type:'Post', 
      success: function (data) { 
      //Show an alert message here that data saved in Web Api blah blah 
      if(data == "Your response from Web Api goes here")//Edit this message 
       alert("Data saved using Web Api"); 
      else 
       alert("Failed to save data using Web Api"); 
      } 
      error: function(xhr, status, error) { 
      alert(xhr.responseText); //This is the exception if any issue with server 
      } 
      }) 
     } 
     else 
      alert("Your data haven't saved in Php Url. Check with server"); 
     return false; 
     } 

希望它能帮助!

+0

如果API未调用,我该如何提醒? – mageDev0688

+0

我可以通过不打电话知道你的意思吗?您想要显示是否使用Web Api保存数据的警报。我对吗 ?如果像那样,那么你可以在其他部分写一条警告消息,就像我在Php Url的情况下一样。 –

+0

是的,如果数据没有保存在API上,那么我想提醒消息,并且还想获得错误消息,以防服务器调用发生任何问题。 – mageDev0688