使用PHP/AJAX更改html内容_Php_Ajax_Html

使用PHP/AJAX更改html内容

php ajax html

使用PHP/AJAX更改html内容,php,ajax,html,Php,Ajax,Html,我希望有人能帮忙我想使用AJAX和PHP替换文档中的input元素，具体取决于PHP中变量的值 html如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Twitter Bootstrap Modal Contact Form Demo</title> <meta name="description" content

我希望有人能帮忙

我想使用AJAX和PHP替换文档中的

input

元素，具体取决于PHP中变量的值

html如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Modal Contact Form Demo</title>
<meta name="description" content="Creating Modal Window with Twitter           
Bootstrap">

<link href="assets/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">      
</script>
<script src="assets/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#submit").click(function(event) {
event.preventDefault();
$.ajax ({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg) {
$("#log").html(msg);
},
error: function() {
alert("failure");
}
});
}); 
});
</script>

<style type="text/css">
body { margin: 50px; background: url(assets/bglight.png); }
.well { background: #fff; text-align: center; }
.modal { text-align: left; }
</style>

</head>
<body>

<div class="container">
<div class="well well-large">
<h2>Twitter Bootstrap Modal Contact Form Demo</h2>
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<label class="label" for="name">Your Name</label><br>
<input type="text" name="name" class="input-xlarge" id="contactName"><br>
<label class="label" for="email">Your E-mail</label><br>
<input type="email" name="email" class="input-xlarge"><br>
<label class="label" for="message">Enter a Message</label><br>
<textarea name="contactMessage" class="input-xlarge" id="contactMessage">     
</textarea>
</form>
</div>
<div class="modal-body" id="log"> </div>
<div class="modal-footer">
<input class='btn btn-success' type='submit' value='Send!' id='submit'>
</div>
</div>
<div id="contactButton"><p><a data-toggle="modal" href="#form-content"     
class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
</div>
</div>

</body>
</html>

<?php
$myemail = 'xxx@gmail.com';

$error = "";

//Validates the fields and set the 'name', 'email' and message fields to        
required. I have removed this part of the code.  It works and the error   
displays in the html

//Displays the success message
if (isset($_POST['name']) AND ($error != "")) {
echo "<span class=\"alert alert-danger\" ><strong>The following errors exist   
in your form: </strong></span><br><br>";
echo $error;
} else {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['contactMessage']);
echo "<span class=\"alert alert-success\" >Your message has been received.     
Thanks! Here is what you submitted:</span><br><br>";
echo "<strong>Name:</strong> ".$name."<br>";    
echo "<strong>Email:</strong> ".$email."<br>";  
echo "<strong>Message:</strong> ".$message."<br>";

//Sends e-mailto = $myemail, also deleted because this works.

?>


Twitter引导模式联系人表单演示
$（文档）.ready（函数（）{
$（“#提交”）。单击（功能（事件）{
event.preventDefault（）；
$.ajax({
类型：“POST”，
url:“process.php”，
数据：$（'form.contact'）。序列化（），
成功：功能（msg）{
$（“#log”）.html（msg）；
},
错误：函数（）{
警报（“故障”）；
}
});
}); 
});
正文{margin:50px；背景：url（assets/bglight.png）；}
.well{背景：#fff；文本对齐：居中；}
.modal{text align:left；}
Twitter引导模式联系人表单演示

process.php（稍加修改）如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Modal Contact Form Demo</title>
<meta name="description" content="Creating Modal Window with Twitter           
Bootstrap">

<link href="assets/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">      
</script>
<script src="assets/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#submit").click(function(event) {
event.preventDefault();
$.ajax ({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg) {
$("#log").html(msg);
},
error: function() {
alert("failure");
}
});
}); 
});
</script>

<style type="text/css">
body { margin: 50px; background: url(assets/bglight.png); }
.well { background: #fff; text-align: center; }
.modal { text-align: left; }
</style>

</head>
<body>

<div class="container">
<div class="well well-large">
<h2>Twitter Bootstrap Modal Contact Form Demo</h2>
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<label class="label" for="name">Your Name</label><br>
<input type="text" name="name" class="input-xlarge" id="contactName"><br>
<label class="label" for="email">Your E-mail</label><br>
<input type="email" name="email" class="input-xlarge"><br>
<label class="label" for="message">Enter a Message</label><br>
<textarea name="contactMessage" class="input-xlarge" id="contactMessage">     
</textarea>
</form>
</div>
<div class="modal-body" id="log"> </div>
<div class="modal-footer">
<input class='btn btn-success' type='submit' value='Send!' id='submit'>
</div>
</div>
<div id="contactButton"><p><a data-toggle="modal" href="#form-content"     
class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
</div>
</div>

</body>
</html>

<?php
$myemail = 'xxx@gmail.com';

$error = "";

//Validates the fields and set the 'name', 'email' and message fields to        
required. I have removed this part of the code.  It works and the error   
displays in the html

//Displays the success message
if (isset($_POST['name']) AND ($error != "")) {
echo "<span class=\"alert alert-danger\" ><strong>The following errors exist   
in your form: </strong></span><br><br>";
echo $error;
} else {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['contactMessage']);
echo "<span class=\"alert alert-success\" >Your message has been received.     
Thanks! Here is what you submitted:</span><br><br>";
echo "<strong>Name:</strong> ".$name."<br>";    
echo "<strong>Email:</strong> ".$email."<br>";  
echo "<strong>Message:</strong> ".$message."<br>";

//Sends e-mailto = $myemail, also deleted because this works.

?>

我希望发生的是，当用户单击submit按钮和php变量（$error=''）时，

必须替换为

任何帮助都将不胜感激。

将您的JQuery AJAX代码更改为：

$(document).ready(function () {
    $("#submit").click(function(event) {
        event.preventDefault();
        $.ajax ({
            type: "POST",
            url: "process.php",
            data: $('form.contact').serialize(),
            dataType: 'json',
            success: function(msg) {
                $("#log").html(msg.html);
                if(!msg.error){
                    $(".modal-footer .btn-success").attr('type','button').val('close');
                    $(".modal-footer .btn-success").attr('id','close');
                    $(".modal-footer .btn-success").attr('data-dismiss','modal');
                }    
            },
            error: function() {
                alert("failure");
            }
        });
    }); 
});

您可以使用php代码：

<?php

$myemail = 'xxx@gmail.com';

$error = "";
$html = '';
$err = false;
//Validates the fields and set the 'name', 'email' and message fields to        
required. I have removed this part of the code.  It works and the error   
displays in the html

//Displays the success message
if (isset($_POST['name']) AND ($error != "")) {
    $html .= "<span class=\"alert alert-danger\" ><strong>The following errors exist in your form: </strong></span><br><br>";
    $html .= $error;
    $err = true;
} else {
    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['email']);
    $message = strip_tags($_POST['contactMessage']);
    $html .= "<span class=\"alert alert-success\" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
    $html .= "<strong>Name:</strong> ".$name."<br>";    
    $html .= "<strong>Email:</strong> ".$email."<br>";  
    $html .= "<strong>Message:</strong> ".$message."<br>";

    //Sends e-mailto = $myemail, also deleted because this works.
}

echo json_encode(array('error'=>$err,'html'=>$html);

?>

你读过了吗？请把相关的代码贴出来……我有。这方面我是新手。我会好起来的。我基本上只是在寻找一种在jQuery中引用php属性的方法，以便将其包含在if语句中。我知道，这将更改属性，但当用户单击send时，无论是否有错误，都会更改属性。我希望代码检查$error是否为空，当它为空时，应该更改属性。我不知道如何在jQuery代码中引用php变量。这就是我被卡住的地方。为什么要使用“=>”而不仅仅是“=”？=>
用于为数组键赋值<代码>$array['key']='value'

与

$array=array（'key'=>'value'）相同而=
是赋值运算符。