隐藏 AJAX 函数中的 jQuery 元素

Question

我正在尝试使用jquery和$.ajax()方法提交表单。将信息提交到服务器时，我只希望保留结果，而隐藏页面的其余部分。我是否可以在 ajax 方法中添加一个条件，该条件声明" if(success)然后在隐藏 h1、h2 和 p 元素的同时显示结果(只留下返回的文本;否则如果(错误)，那么只需在页面底部的div占位符内显示错误消息，而无需.hide()-ing任何元素。因此，在 ajax 方法成功后，我希望所有元素都隐藏，除了div 占位符中返回的文本。如果发生错误(表单留空)，则在div 占位符中显示错误消息，同时保留所有元素。

更新：

当我在示例中使用警报时，它们总是以成功的形式出现。ajax/jquery 无法识别我的 if 语句。知道这里可能发生了什么吗？

.HTML：

<form id="form" action="form.php">
<label for="name">Name: </label>
<input type="text" id="name" name="name">
<label for="phone">Phone: </label>
<input type="text" id="phone" name="phone">
</form>
<input type="submit" id="clickMe" value="Send" class="clear">
<p id="display"> </p>

jQuery/Ajax

$(document).ready(function() {
$("#clickMe").click(function(event){
event.preventDefault();
var myData = $('#form').serialize();    
$.ajax({
url: 'form.php',  
data: myData,    
success: function (result) {
$('#display').html(result);
if(myData.indexOf("Thank")){
alert("success")
} 
},
error: function (xhr, status, error) {
$('#display').html("Error: " + xhr.status + " " + xhr.statusText);
if(myData.indexOf("Something went wrong")){
alert("error");
}
}
});
}); 
});

.PHP

if(!empty($_GET['name'])
echo "Thank you for your messsage ";

else {
echo "Something went wrong.;
}

Answer 1

试试这个

$('#display').text(result);

我希望它有所帮助

我认为最好添加类。 示例 在你的 CSS 中

.test{ background-color:#000000;}

关于成功

$('#display').addClass("test");

或者您可以直接添加

$('#display').css('background-color','block');

我以为你的问题出在你的 css 上。

你忘了添加你的阿贾克斯。

type: "post"

Answer 2

由于您没有显示任何进行验证的 PHP 代码，我不知道您的代码外观如何，但您必须执行以下操作：

以下内容应放在form.php文件的顶部：

if(isset($_POST['name'])){
// return either true/false depending on validation
// By default set the success message
$success = true;
$message = 'My success message';
// now do your conditional checks and based on that change to false
// Example: when validation fails on name:
if($_POST['name']==''){
$success = false;
$message = 'My error message: (Name is a required field)';
}   
// convert array to json, so we can read it out nicely on ajax return
echo json_encode($result);
// stop rest of our code
exit;
}

然后将 ajax 成功更改为：

请注意：

从jQuery 3.0开始，$.parseJSON已被弃用。若要分析 JSON 字符串，请改用本机JSON.parse方法。

success: function (result) {
// Read the json string to proper object, for jQuery 3.0+ use native method instead
var $data = jQuery.parseJSON(result);
// Check if there where no validation problems
if($data.success==true){
// Write success message to DOM element
$('#display').html($data.message);
}else{
// Write error message to DOM element
$('#display').html($data.message);
}
},