2013-12-20 136 views
1

我有一個由兩部分組成的ajax表單,它將數據提交給php文件以處理服務器端的請求並返回結果。jquery 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很新,所以我不知道我在哪裏卡住了。任何幫助是極大的讚賞。

謝謝!

+0

你真的需要考慮防範SQL注入的;此時你非常脆弱。你也應該在PHP中使用'mysqli'或'PDO'來訪問MySQL,因爲'mysql_ *'函數已被廢棄。 –

回答

1

您需要:

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

preventDefault()需要防止默認提交表單從處理程序運行後發生。正常的提交是重新加載頁面。

0

submit事件被稱爲和你<form>是指導瀏覽器無處action=""

要麼不使用一個提交按鈕(又名使用<input type="button"><button>),這也需要改變.submit().click()或使用提交按鈕,但取消默認操作。

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

乾杯