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

我是PHP、HTTP请求和JSON响应之类的新手。所以，请帮帮我

我有一个HTML表单，如下所示：

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

目前，如果我在浏览器中点击此URL，我会在浏览器窗口中获得JSON格式的数据

参数HBLNo只不过是用户在输入文本字段（

id=“input”

）中输入的值，在提交表单时将作为查询字符串附加到上述URL

我应该如何通过PHP代码实现这一点：用户在输入文本字段中输入一些数据，提交表单，生成HTTP请求，接收JSON数据，解析JSON数据，并将其放入一个适当的UI格式中，该格式本质上是响应的

显示结果的UI页面在移动/平板设备浏览器上也应该响应

有人能在这方面帮助我吗

---

提前谢谢。

你的问题很基本。你一定是个新手。欢迎加入我们的团队。每个人开始都和你一样。 为了解决这个问题，不要费心编写ajax post请求。只需使用jquery.form插件

构建一个与现有表单一样简单的表单，并将其绑定到插件，如下所示：

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

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

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

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

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