如何生成HTTP请求以在提交表单时从某些URL获取JSON格式的数据？

Question

I'm a newbie to the things like PHP, HTTP request and JSON response. So, please help me.

I've an HTML form as follows :

    <form>
      <div id="link2" style="float:left; width:320px; margin:10px 115px 20px 55px; border:1px solid #ccc; border-radius:5px;">    
      <p style="font-size:20px; padding:20px; text-align:center; font-family…'Trebuchet MS', Arial, Helvetica, sans-serif; color:#014464;">    
           Track your shipment    
      </p>
      <input id="input" type="text" style="float:left;" placeholder=" Enter your shipment number"></input>
      <button class="btn btn-primary" style="width:45px; margin-left:0px; border-top-left-radius:0px; border-bottom-left-radius:0px; padding:0px 0px;" value="">
        <img width="32" height="32" src="image/go.png"></img>
      </button>    
    </div>
  </form>

Now when user will enter some value in a input text field(id="input"), submits the form then an HTTP request should get generate to fetch the data in JSON format.

For it following is the URL :

 http://54.169.89.151/ShipmentTracking/Service1.svc/GetStatusJson?HBLNo=TESTHBL/23

Currently, if I hit this URL in the browser I get data in JSON format in my browser window.

The parameter HBLNo is nothing but the value entered by user in an input text field(id="input") which would append to the above URL as a query string upon form submission.

How should I make this happen through PHP code that user enters some data in a input text field, submits the form, the HTTP request gets generate, the JSON data receives, parse the JSON data and put it in a decent UI format which is responsive in nature.

The UI page showing results should be responsive on Mobile/Tablet device browsers as well.

Can someone please help me in this regard?

Thanks in advance.

Answer 1

Your question is very basic. You must be a newbie. Welcome to the team. Everybody started just like you. To solve this problem, dont bother writing your ajax post request. Simply use the jquery.form plugin http://malsup.com/jquery/form/#getting-started

Build a form as simple as the one you already have and bind it to the plugin as below:

    <form class="myajaxform" method="post" action = "/ShipmentTracking/Service1.svc/GetStatusJson">
      <div id="link2" style="float:left; width:320px; margin:10px 115px 20px 55px; border:1px solid #ccc; border-radius:5px;">    
      <p style="font-size:20px; padding:20px; text-align:center; font-family…'Trebuchet MS', Arial, Helvetica, sans-serif; color:#014464;">    
           Track your shipment    
      </p>
      <input name="shipmentnumber" id="input" type="text" style="float:left;" placeholder=" Enter your shipment number"></input>
      <button class="btn btn-primary" style="width:45px; margin-left:0px; border-top-left-radius:0px; border-bottom-left-radius:0px; padding:0px 0px;" value="">
        <img width="32" height="32" src="image/go.png"></img>
      </button>    
    </div>
  </form>

Take note of the action, method and class attribute of your form. if the url i entered isnt correct, fix it as required.

Write your jquery code

<script type="text/javascript">
    $(function(){
        var options = { 
            success:function(){
                 //handle your server json response here
            },
            dataType:  'json'
        }; 

        // bind to the form's submit event 
        $('.myajaxform').submit(function() { 
            $(this).ajaxSubmit(options); 
            return false; 
        }); 
    });
</script>

On your php code just write a simple request and response code. Make sure you return a json data object

e.g

<?php  echo '{ "SNUM": "' . $_POST['shipmentnumber'] . '" }';  ?>

If you visit the documentation section of the jquery.form.js plugin at the provided link above, there are multiple options you can set to do much more for any other further ajax request you may encounter in the future

var options = { 
    target:        '#output2',   // target element(s) to be updated with server response 
    beforeSubmit:  function(formData, jqForm, options){},  // pre-submit callback 
    success:       function(responseText, statusText, xhr, $form){}  // post-submit callback 

    // other available options: 
    url:       url         // override for form's 'action' attribute 
    type:      type        // 'get' or 'post', override for form's 'method' attribute 
    dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    clearForm: true        // clear all form fields after successful submit 
    resetForm: true        // reset the form after successful submit 

    $.ajax options can be used here too, for example: 
    timeout:   3000 
};