使用ajax jsonp的跨域表單數據返回錯誤：{「readyState」：4，「status」：200，「statusText」：「success」}

Question

我試圖將表單數據發佈到一個php文件，處理一個mysql請求。但在我執行mysql之前，我試圖連接到php文件。

該請求是跨域。

當我提交表單，我得到的錯誤：{ 「readyState的」：4， 「狀態」：200， 「狀態文本」： 「成功」}

您可以看到測試頁面在這裏：http://jonathan-tapia.mybigcommerce.com/store-locator/

形式代碼：

<div class="map-search"> 
    <h1>Give us your zip code. We'll tell you where to find us.</h1> 
    <div id="map-form"> 
     <form id="lookup-form" action="http://dev.visioncourse.com/customers/baldguy/index.php" method="post"> 
      <p>Within 
       <select id="distance" name="distance"> 
        <option value="10">10</option> 
        <option selected="selected" value="25">25</option> 
        <option value="50">50</option> 
        <option value="100">100</option> 
       </select> 
       miles of 
       <input id="zipcode" type="text" name="postalcode" value="" size="8" /> 
       <input id="lookup" type="submit" value="Look Up" /> 
      </p> 
     </form> 
    </div> 
</div> 
<div class="map-results">&nbsp;</div> 

更新JS：

<script type="text/javascript">// <![CDATA[ 
//submit form 
$('#lookup-form').submit(function(event) { 
    event.preventDefault(); 
    var formdata = $(this); 
    var link = formdata.attr('action'); 
    var distance = $('#distance').val(); 
    var zipcode = $('#zipcode').val(); 
    console.log('.\n..\n...\n....\nSubmitting Form\n....\n...\n..\n.'); 
    $.ajax({ 
     crossDomain: true, 
     type: 'POST', 
     url: link, 
     data: { 
      'distance': distance, 
      'postalcode': zipcode 
     }, 
     dataType: 'jsonp', 
     error: function(data) { 
      console.log('error: ' + data); 
     }, 
     success: function(data) { 
      console.log('success: ' + data); 
     }, 
     xhrFields: { 
      withCredentials: true 
     } 
    }); 
}); 

//]]>

更新的PHP文件：

<?php 
$arr = array(); 
$distance = $_POST['distance'] 
$zip = $_POST['postalcode']; 
if(isset($distance) && isset($zip)) { 
    array_push($arrr, {'d': $distance, 'z': $zip}); 
} 
echo json_encode($arr); 

>

的錯誤，我正在從控制檯接收：

GET http://dev.visioncourse.com/customers/baldguy/index.php?callback=jQuery17203092896034941077_1451698154204&distance=25&postalcode=85251  jquery.min.js:4 

編輯： PHP文件將得到的距離和郵政編碼窗體並連接到一個谷歌地圖商店定位器的MySQL數據庫。所以當一個人提交半徑和郵政編碼時，它會顯示結果。但所有這些都將在PHP文件中。

文件做表單提交將提交表單，等待PHP做的工作，然後用結果

Answer 1

與data: {"distance": distance, "zipcode": zipcode},試試顯示PHP文件。 在您的代碼中，您插入兩次變量的值而不是名稱和值。

此外，您需要發送郵政編碼的名稱'郵政編碼'。否則你的phpscript不會找到它。

Answer 2

你可以試試這個方法：

的javascript：

<script> 
var formdata = $(this); 
var link = formdata.attr('action'); 
var distance = $('#distance').val(); 
var zipcode = $('#zipcode').val(); 
$.ajax({ 
    type: 'GET', 
    url: link, 
    data: {"distance": distance,"postalcode": zipcode}, 
    async: false, 
    jsonpCallback: 'jsonp_callback',//name of function returned from php 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: function(r) { 
     console.log(r); 
    }, 
    error: function(e) { 
     alert(e.message); 
    } 
}); 
</script> 

PHP：

<?php 
$arr = array(); 
$distance = $_GET['distance'];//sample 123 
$zip = $_GET['postalcode'];//sample 65455 
if(isset($distance) && isset($zip)) { 
    $arr = array('d'=> $distance, 'z'=> $zip); 
} 
$json = 'jsonp_callback('; 
$json .= json_encode($arr); 
$json .= ');'; 
echo $json; 
?> 

響應：

jsonp_callback({"d":123,"z":65455});