AJAX窗體通信，顯示結果消息 - 如何？

-1

我是新來的阿賈克斯場景，並慢慢地掌握它，有點。我已經構建了一個相當有用的表單，除了一些我正在解決的細節之外。其中之一就是這個問題的原因。AJAX窗體通信，顯示結果消息 - 如何？

我有一個窗體，它通過html - > ajax - > php - > mysql通過ajax成功更新到mysql數據庫。但是，目前絕對沒有任何通信消息或指標從PHP返回到HTML，以指示成功或錯誤。對於使用Ajax來說很新，有些幫助是值得讚賞的。

技術在使用：jQuery的，的JavaScript，HTML，PHP

HTML表單（它的一個部分，而不是全部的形式，因爲這將是不必要的）：

<form id="<?=$applicationKey?>" name="<?=$applicationKey?>" action="./post.<?=$appNo.'.'.$applicationKey?>.php" method="POST" enctype="multipart/form-data"> 
<input type="hidden" name="token" value="<?=$sessionToken?>"> 
<input type="hidden" name="uID" value="<?=$uID?>"> 
<input type="hidden" name="uaID" value="<?=$uaID?>"> 
<input type="hidden" name="appID" value="<?=$appID?>"> 

<table style="width: 100%; height: auto;"> 
    <tbody><tr> 
    <td class="tright" style="width: 265px;">Name of the Applicant's Organisation:</td> 
    <td><input type="text" id="input_1_1" name="input_1_1" placeholder="Name of the Applicant's Organisation" maxlength="64" value="<?=$input_1_1?>" required><span id="resultImg_1_1"></span><br> 
    <div id="errorText_1_1" class="errorOutput"></div></td> 
    </tr> 
    <tr> 
    <td class="tright">Contact Person:</td> 
    <td><input type="text" id="input_1_2" name="input_1_2" placeholder="Contact Person" maxlength="64" value="<?=$input_1_2?>" required><span id="resultImg_1_2"></span><br> 
    <div id="errorText_1_2" class="errorOutput"></div></td> 
    </tr> 
    <tr> 
    <td class="tright">Telephone (Landline):</td> 
    <td><input type="text" id="input_1_3" name="input_1_3" placeholder="Telephone (Landline)" maxlength="22" value="<?=$input_1_3?>" required><span id="resultImg_1_3"></span><br> 
    <div id="errorText_1_3" class="errorOutput"></div></td> 
    </tr> 
    <tr> 
    <td class="tright">Telephone (Mobile):</td> 
    <td><input type="text" id="input_1_4" name="input_1_4" placeholder="Telephone (Mobile)" maxlength="22" value="<?=$input_1_4?>" required><span id="resultImg_1_4"></span><br> 
    <div id="errorText_1_4" class="errorOutput"></div></td> 
    </tr> 
    <tr> 
    <td class="tright">Email:</td> 
    <td><input type="text" id="input_1_5" name="input_1_5" placeholder="Email" maxlength="64" value="<?=$input_1_5?>" required><span id="resultImg_1_5"></span><br> 
    <div id="errorText_1_5" class="errorOutput"></div></td> 
    </tr> 
    <tr> 
    <td class="tright">Fax:</td> 
    <td><input type="text" id="input_1_6" name="input_1_6" placeholder="Fax" maxlength="22" value="<?=$input_1_6?>" required><span id="resultImg_1_6"></span><br> 
    <div id="errorText_1_6" class="errorOutput"></div></td> 
    </tr> 
    <tr> 
    <td class="tright">Address:</td> 
    <td><textarea id="input_1_7" name="input_1_7" placeholder="Address" maxlength="120" required><?=$input_1_7?></textarea><span id="resultImg_1_7"></span><br> 
    <div id="errorText_1_7" class="errorOutput"></div></td> 
    </tr></tbody> 
</table>

所包含的js文件如下像這樣（爲形式的這部分）：

function doSend_1_1() { 
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_1', $('#input_1_1').serialize()); 
} 

function doSend_1_2() { 
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_2', $('#input_1_2').serialize()); 
} 

function doSend_1_3() { 
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_3', $('#input_1_3').serialize()); 
} 

function doSend_1_4() { 
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_4', $('#input_1_4').serialize()); 
} 

function doSend_1_5() { 
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_5', $('#input_1_5').serialize()); 
} 

function doSend_1_6() { 
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_6', $('#input_1_6').serialize()); 
} 

function doSend_1_7() { 
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_7', $('#input_1_7').serialize()); 
} 

$("document").ready(function() { 
    $("#input_1_1").blur(doSend_1_1); 
    $("#input_1_2").blur(doSend_1_2); 
    $("#input_1_3").blur(doSend_1_3); 
    $("#input_1_4").blur(doSend_1_4); 
    $("#input_1_5").blur(doSend_1_5); 
    $("#input_1_6").blur(doSend_1_6); 
    $("#input_1_7").blur(doSend_1_7); 
})

最後，接收PHP的部分，與這裏顯示的形式的部分交易，看起來是這樣的：

<?php 
// include the funcky stuff 
include './conf/Funcs.php'; 
include './conf/DBconfig.php'; 

// GET the constants 
$token = $_GET['token']; 
$appID = $_GET['appID']; 
$ident = $_GET['ident']; 

// =================== TAB 1 =================== 
// organisation 
if(($ident) == "input_1_1") { 
    $userInput = $_POST['input_1_1']; 
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; } 
    try { 
     $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `organisation` = :userinput, `lastModified` = :time WHERE `appID` = :appid"); 
     $stmt->bindParam(':userinput', $userInput, PDO::PARAM_STR, 64); 
     $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11); 
     $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11); 
     $stmt->execute(); 
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); } 
} 

// contactPerson 
if(($ident) == "input_1_2") { 
    $userInput = $_POST['input_1_2']; 
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; } 
    try { 
     $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `contactPerson` = :userinput, `lastModified` = :time WHERE `appID` = :appid"); 
     $stmt->bindParam(':userinput', $userInput, PDO::PARAM_STR, 64); 
     $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11); 
     $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11); 
     $stmt->execute(); 
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); } 
} 

// phoneLandline 
if(($ident) == "input_1_3") { 
    $userInput = $_POST['input_1_3']; 
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; } 
    try { 
     $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `phoneLandline` = :userinput, `lastModified` = :time WHERE `appID` = :appid"); 
     $stmt->bindParam(':userinput', $userInput, PDO::PARAM_INT, 22); 
     $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11); 
     $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11); 
     $stmt->execute(); 
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); } 
} 

// phoneMobile 
if(($ident) == "input_1_4") { 
    $userInput = $_POST['input_1_4']; 
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; } 
    try { 
     $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `phoneMobile` = :userinput, `lastModified` = :time WHERE `appID` = :appid"); 
     $stmt->bindParam(':userinput', $userInput, PDO::PARAM_INT, 22); 
     $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11); 
     $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11); 
     $stmt->execute(); 
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); } 
} 

// email 
if(($ident) == "input_1_5") { 
    $userInput = $_POST['input_1_5']; 
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; } 
    try { 
     $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `email` = :userinput, `lastModified` = :time WHERE `appID` = :appid"); 
     $stmt->bindParam(':userinput', $userInput, PDO::PARAM_STR, 64); 
     $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11); 
     $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11); 
     $stmt->execute(); 
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); } 
} 

// fax 
if(($ident) == "input_1_6") { 
    $userInput = $_POST['input_1_6']; 
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; } 
    try { 
     $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `fax` = :userinput, `lastModified` = :time WHERE `appID` = :appid"); 
     $stmt->bindParam(':userinput', $userInput, PDO::PARAM_INT, 22); 
     $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11); 
     $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11); 
     $stmt->execute(); 
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); } 
} 

// address 
if(($ident) == "input_1_7") { 
    $userInput = $_POST['input_1_7']; 
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; } 
    try { 
     $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `address` = :userinput, `lastModified` = :time WHERE `appID` = :appid"); 
     $stmt->bindParam(':userinput', $userInput, PDO::PARAM_STR, 128); 
     $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11); 
     $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11); 
     $stmt->execute(); 
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); } 
}

等等以及其他我沒有在這裏引用的表格。我意識到有一些GET操作發生在這 - 這沒關係。爲了安全起見，我想要一些由GET完成的事情，而不是POST（我沒有在這個例子中顯示，這與此無關）。正如我之前提到的，這是我的第一個Ajax工作，所以我知道這不會是原始的。我現在確信，並不想真正想用幾種不同的方式來重寫它。我只需要知道如何發回來自php的消息，告訴html是否成功失敗，如果失敗，爲什麼。我在html中準備了相應的錯誤輸出div，並且我還有一個跨度也準備好了一個很好的圖像來對應（勾號或彈性箭頭以引起注意需要修復的東西）。演示如何驗證和發回消息 - 使用JSON（？）會很有幫助。我已經閱讀了很多關於JSON對此的好處，儘管我還沒有弄明白。

來源

2015-02-10 Cassandra

你有沒有嘗試使用螢火/ Chrome開發集成網絡選項卡檢查通信？我認爲這個小東西非常方便，因爲您還會在服務器上看到失敗的請求（由您的ajax php文件的錯誤位置字符串引起）。取決於你使用哪個jquery函數從服務器獲取數據，如果在格式化時有任何錯誤（例如使用$ .getJson加載數據並且結果不是有效的json（for例如由於一個mysql錯誤）） – serjoscha 2015-02-10 14:49:13

@serjoscha Firebug不報告任何問題，只是因爲現在沒有問題。我不知道如何或在哪裏設置我想要的東西的溝通因素，這是一個問題。 – Cassandra 2015-02-10 14:51:07

@Cassandra這是一個社區網站，其中[內容可以被其他用戶編輯審查等]。（http://stackoverflow.com/help/editing）你的編輯評論不適合你的問題。如果你有關於編輯的問題，那麼[在元堆棧溢出處理]（http://meta.stackoverflow.com/questions/ask）。將它放在問題中並不適合它。 – Taryn 2015-02-10 14:54:29

實際上，它並不像看起來那麼複雜。當你在php中處理ajax請求時，你在php中輸出的任何內容都會被返回，你可以在你的javascript中使用它。

所以，如果你有你的PHP腳本中的echo 'hello';，你好會被髮回到你的JavaScript。你可以輸出幾乎任何東西。

JSON是輸出的便利格式，因爲它非常容易在兩種語言中處理。如果您在使用數據的PHP有一個關聯數組，你要送回去，你可以簡單地做：

$return = json_encode($my_data); 
header('Content-Type: application/json'); 
echo $return;

然後你可以得到你的JavaScript數據：

$.post('handler.php', function(data) { 
    // data now has the data structure from your php in it, ready to use. 
});

這裏是一個例如，從你的PHP將一些數據回來的（我敢肯定，你會做在實踐中有些不同，但只是一個例子配合在現有的代碼）：

$error_message = ''; 
if(($ident) == "input_1_1") { 
    $userInput = $_POST['input_1_1']; 
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; } 
    try { 
     $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `organisation` = :userinput, `lastModified` = :time WHERE `appID` = :appid"); 
     $stmt->bindParam(':userinput', $userInput, PDO::PARAM_STR, 64); 
     $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11); 
     $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11); 
     if($stmt->execute()) { 
      $error_message = 'Success'; 
     } else { 
      $error_message = 'Error'; 
     } 
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); } 
} 

$return_data = array('errorText' => $error_message); 
echo json_encode($return_data);

然後你可以使用你的javasc ript來顯示消息：

function doSend_1_1() { 
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_1', $('#input_1_1').serialize()).done(function(data) { 
     $('#errorText_1_1').html(data.errorText); 
    }); 
}

在這個簡單的例子中，沒有必要使用JSON--我們可以發回文本。但希望它能夠展示如何根據需要發送更多數據。你放入$return_data的任何東西都會被髮送到你的javascript .done函數。

試試這個指定的響應將會在JSON，這樣就可以直接使用返回的數據：

function doSend_1_1() { 
     $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_1_1', 
       $('#input_1_1').serialize(), 
       function(data) { 
        $('#errorText_1_1').html(data.errorText); 
       }, 
       'json'); 
}

來源

2015-02-10 14:50:53

@詹姆斯謝謝詹姆斯，你能用我的上面的代碼給我一個小小的演示代碼，所以我可以感覺如何使它工作？謝謝。 – Cassandra 2015-02-10 15:08:34

@Cassandra，我用一個粗略的例子更新了我的答案，它只是根據$ stmt-> execute return發送成功或失敗消息。不是你在現實中如何處理它，而是希望顯示返回和處理數據的機制。 – 2015-02-10 15:35:09

@James Huge感謝詹姆斯，非常感謝。 :) – Cassandra 2015-02-10 15:36:39

AJAX窗體通信，顯示結果消息 - 如何？

回答

相關問題