使用ajax保存在php中后，将数据发布到WebAPI上

Question

I have created the code for save data in my custom table using Ajax which is working fine.

After that I want to post these data on the asp.Net API using js/jQuery. How I can post same data on the aps.net.

Here is my HTML form and JS code:

<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 Code is here

<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>

In the alert I getting alert data saved success fully .

Answer 1

Simply add one more ajax method after saving in your php Url.

See, in your above ajax success method, check the status then post to Asp.Net Web Api, just like my bellow code,

 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;
       }

Hope it helps!