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窗体通信，显示结果消息 - 如何？

回答

相关问题