jquery ajax请求不显示php结果答案

【问题标题】：jquery ajax request no displaying php resultjquery ajax请求不显示php结果
【发布时间】：2013-12-20 21:37:04
【问题描述】：

我有一个由两部分组成的 ajax 表单，它将数据提交到 php 文件以在服务器端处理请求并返回结果。

这是 HTML 表单：

<div id="new_loc">
  <form id="loc_form" method="post" action="">
    <p><b>Country Name</b><br />
    <select id="country" name="country" tabindex="1">
    <option value="">Choose One</option>
    <?php
      $cq = mysql_query("SELECT * FROM crm_countries WHERE country_status = '1' ORDER BY country_name ASC");
      while($rowc = mysql_fetch_assoc($cq)) {
      echo '<option value="' . $rowc['country_code'] . '">' . ucwords(strtolower($rowc['country_name'])) . '</option>';
      }
    ?>
    </select></p>
    <p id="state_list"><b>State Name</b><br />
    <select id="state" name="state" tabindex="2">
    <option value="">Choose One</option>
    </select></p>
    <p><b>City Name</b><br />
    <input type="text" id="city" name="city" size="30" tabindex="3" /></p>
    <p><b>Zip Code</b><br />
    <input type="text" id="zip" name="zip" size="7" tabindex="4" /></p>
    <p><input type="submit" id="save_zip" name="save_zip" value="Save" tabindex="5" /></p>
  </form>
</div>

然后这是我的 jquery 代码，用于将数据发送到 PHP 文件并接收响应：

$(function(){

    // THE AJAX QUERY TO GET THE LIST OF STATES BASED ON THE COUNTRY SELECTION
    $('#country').change(function(){

        // DISPLAYS THE LOADING IMAGE
        $("#state_list").html('<img src="images/Processing.gif" />');

        var ctry = $('#country').val();

        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {c:ctry}
        }).done(function(result) {
            $("#state_list").html("<b>State Name</b><br />" + result);
        });
    });

    // THE AJAX QUERY TO SAVE THE NEW ZIP CODE TO THE DATABASE
    $('#loc_form').submit(function(){

        // DISPLAYS THE LOADING IMAGE
        $("#new_loc").html('<img src="images/Processing.gif" />');

        var sz = $('#save_zip').val();
        var ct = $('#country').val();
        var st = $('#state').val();
        var ci = $('#city').val();
        var zc = $('#zip').val();

        $.ajax({
            type: "POST",
            url: "ajax.php",
            datatype: "text",
            data: {save_zip:sz,country:ct,state:st,city:ci,zip:zc}
        }).done(function(result) {
            $("#new_loc").html(result);
        }).fail(function() {
            $("#new_loc").html('<div class="failure">An error occurred. The form could not be submitted.</div>');
        });
    });
});

最后是处理代码的 PHP 代码（在一个名为 ajax.php 的文件中）：

<?php
session_start();

require ROOT_PATH . '/config.php';
require LAN_PATH . 'english.php';


// GETS THE STATE LIST BASED ON THE COUNTRY SELECTED
if($_POST['c']) {
  $sq = mysql_query("SELECT * FROM crm_states WHERE state_country = '{$_POST['c']}' ORDER BY state_name ASC");
  $sRows = mysql_num_rows($sq);

  if($sRows < '1') {
    $result = '<i>Error: No states found!</i>';
  }
  else {
    $result .= '<select id="state" name="state" tabindex="2">';
    while($rows = mysql_fetch_assoc($sq)) {
      $result .= '<option value="' . $rows['state_abbr'] . '">' . $rows['state_name'] . '</option>';
    }
    $result .= '</select>';
  }

  echo $result;
}


// SAVES THE NEW ZIP CODE TO THE DATABASE
if($_POST['save_zip']) {  
  $zcq = mysql_query("SELECT * FROM crm_zip_codes WHERE zip_code = '{$_POST['zip']}' AND zip_state = '{$_POST['state']}' AND zip_country = '{$_POST['country']}'");
  $zcRows = mysql_num_rows($zcq);

  if($zcRows == '1') {
    $result = '<div class="failure">' . ZIP_EXISTS . '</div>';
  }
  else {
    $azq = mysql_query("INSERT INTO crm_zip_codes VALUES('{$_POST['zip']}','{$_POST['city']}','{$_POST['state']}','{$_POST['country']}','','1')");
    $azRows = mysql_affected_rows();

    if($azRows != '1') {
      $result = '<div class="failure">' . ZIP_ERROR . '</div>';
    }
    else {
      $result = '<div class="success">' . ZIP_ADDED . '</div>';
    }
  }

  echo $result;
}

?>

第一个 AJAX 调用似乎工作得很好。将数据提交到 PHP 文件并返回结果 -> 状态选择表单的值或文本错误消息。

第二个 AJAX 调用给我带来了问题。信息似乎已提交，但没有从 PHP 文件返回结果（正面或负面）。我已经通过直接 $_GET 和 $_POST 请求测试了 PHP 文件，它工作正常。

我对 jQuery 很陌生，所以我不知道我在哪里卡住了。非常感谢任何帮助。

谢谢！

【问题讨论】：

您确实需要研究预防 SQL 注入。在这一点上，你非常脆弱。您还应该使用 mysqli 或 PDO 在 PHP 中访问 MySQL，因为不推荐使用 mysql_* 函数。

标签： php jquery ajax

【解决方案1】：

你需要：

$('#loc_form').submit(function(e){
    e.preventDefault();
    ...
});

需要preventDefault() 以防止在处理程序运行后发生表单的默认提交。正常提交是重新加载页面。

【讨论】：

【解决方案2】：

submit 事件正在被调用，而您的 <form> 正在将浏览器定向到无处 action=""

要么不使用提交按钮（又名使用<input type="button"> 或<button>），这还需要将.submit() 更改为.click()，或者使用提交按钮但取消默认操作。

$('#loc_form').submit(function(evt) {
    var e = evt || window.event;
    e.preventDefault();
    ...
});

干杯

【讨论】：