使用ajax处理表单

时间:2013-06-13 15:53:42

标签: php javascript mysql ajax

我在这里有一个页面,其中我正在尝试更新用户的电子邮件,现在div刷新就像提交一样,但它没有更新数据库,而且我不知道为什么会这样。< / p>

我的布局是一页单击一个菜单链接,它将页面加载到内容div(下面有)现在我想发布一个表单并重新加载到该div并更新mysql数据库但由于某种原因它不要我想更新数据库。

任何人都对为什么不更新数据库有任何建议?我在php的某个地方犯了一个小错误,还是因为我的页面设置加载?

提前致谢。 :)

<?php
session_start();
include_once("./src/connect.php");
include_once("./src/functions.php");

//Update email
if (isset($_POST['update'])){
$email = makesafe($_POST['email']);

$result = mysql_query("UPDATE Accounts SET email='$email' WHERE `id`= '{$fetchAccount['id']}'") 
or die(mysql_error());

echo "<font color='lime'>Updated.</font>";

}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="./static/css/LoggedIn/Index.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function($) {

$("#Submit").click(function() {

var url = "Profile.php"; // the script where you handle the form input.

$.ajax({
   type: "POST",
   url: url,
   data: $("#myForm").serialize(), // serializes the form's elements.
   success: function(html){ $("#right").html(html); }
 });

return false; // avoid to execute the actual submit of the form.
});
 });
</script>
</head>

<body>

<div id="right">

<form method="post" action="Profile.php" id="myForm">
 E-mail: <input type="text" value="<?=$fetchAccount['email']?>" name="email"><br>
<input type="submit" value="Edit" name="update" id="Submit">
 </form>

</div>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

继续进行一些更改,阅读代码注释,但代码中的主要问题是ajax将使整个页面不仅仅是echo "<font color='lime'>Updated.</font>";部分。

<?php
session_start();
include_once("./src/connect.php");
include_once("./src/functions.php");

//Update email only if request is from ajax request
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
    //check its POST, and email is real, then do update or exit a error message back
    if($_SERVER['REQUEST_METHOD']=='POST' && !empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){

        header('Content-Type: text/html');
        //check its an email
        if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
            exit('<span style="color:red;">Invalid email.</span>');
        }

        //Do update
        mysql_query("UPDATE Accounts
                     SET email='".mysql_real_escape_string($_POST['email'])."' 
                     WHERE id= ".mysql_real_escape_string($fetchAccount['id'])) or die('<span style="color:red;">Error updating email. '.mysql_error().'</span>');


        exit('<span style="color:lime;">Updated.</span>');
    }
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="./static/css/LoggedIn/Index.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
<script type="text/javascript">
$(function(){
    $("#Submit").click(function(e) {
        $.ajax({
            type: "POST",
            url: "Profile.php",
            data: $("#myForm").serialize(), // serializes the form's elements.
            success: function(html){ $("#right").html(html); }
        });
        e.preventDefault();
    });
});
</script>
</head>

<body>

<div id="right">
    <form method="post" action="Profile.php" id="myForm">
        E-mail: <input type="text" value="<?=htmlspecialchars($fetchAccount['email'])?>" name="email"/><br/>
        <input type="submit" value="Edit" name="update" id="Submit"/>
    </form>
</div>

</body>
</html>

希望有所帮助