Question

我试图将表单数据发布到php文件，然后处理mysql请求。但在我做mysql之前，我试图连接到php文件。

请求是跨域。

当我提交表单时，我收到错误：{＆＃34; readyState＆＃34;：4，＆＃34; status＆＃34;：200，＆＃34; statusText＆＃34;：＆＃34;成功＆＃34;}

您可以在此处查看测试页：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
        }
    });
});

//]]＆gt;

更新了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);

＆GT;

错误我从控制台收到：

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

编辑： php文件将从表单获取距离和邮政编码，并连接到谷歌地图商店定位器的mysql数据库。所以当一个人提交半径和邮政编码时，它会显示结果。但所有这些都将在php文件中。

执行表单提交的文件将提交表单，等待php完成它的工作，然后显示带有结果的php文件

Answer 1

使用data: {"distance": distance, "zipcode": zipcode},试用。在您的代码中，您插入变量的值两次而不是名称和值。

此外，您需要发送名称为＆＃39; postalcode＆＃39;的邮政编码。否则你的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});

带有ajax jsonp的跨域表单帖子返回错误：{＆＃34; readyState＆＃34;：4，＆＃34; status＆＃34;：200，＆＃34; statusText＆＃34;：＆＃34; success＆＃34 ;}

2 个答案: