Question

我有一个两部分的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文件并返回结果 - ＆gt;状态选择表单的值或文本错误消息。

第二次AJAX调用给我带来了麻烦。信息似乎已提交，但没有从PHP文件中重新获得结果（正面或负面）。我通过直接$ _GET和$ _POST请求测试了PHP文件，它工作正常。

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

谢谢！

Answer 1

你需要：

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

需要

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

Answer 2

正在调用submit个活动，而您的<form>正在引导浏览器无处action=""

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

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

干杯

jquery ajax请求不显示php结果

2 个答案: