0

我正在使用 Ajax、jQuery 和 PHP，试图熟悉它们的组合以及它们如何相互集成。这是我的第一次尝试，这是一个非常简单的表单提交，没有什么特别之处，只是想看看 ajax 如何处理请求和响应。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
    <title>My 1st AJAX attempt</title>
    <link href="http://www.ht-webcreations.com/test/styles.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" language="javascript">

    $(document).ready(function() {

        $('#wait').hide();

        $("#emailContactus").submit(function(){
             $('#wait').show(),
             $.ajax({
                data: $(this).serialize(),
                type: "POST",
                url: 'includes/ajax.php?action=emailContactus',
                success: function(data) {
                    console.log("Success posting emailContactus"),
                    $('#wait').hide(),
                    $('#notifications').html(data).addClass('ajaxsuccess').show();
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log("Success posting emailContactus: "+ textStatus, errorThrown);
                },
                complete: function(data){
                    $('#wait').hide(),
                    $('#notifications').html(data).addClass('ajaxsuccess').show();
                }
            });
           return false;
         }); 
    });
    </script>

    </head>

    <body>
    <div id="wait"><img src="http://www.ht-webcreations.com/test/loading_ajax.gif" width="80" height="80"></div>
    <div id="notifications"></div>

    <form name="emailContactus" id="emailContactus" method="post">
      <table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
        <tr>
          <td>name</td>
          <td><label for="name"></label>
          <input type="text" name="name" id="name"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><input type="submit" name="button" id="button" value="Submit"></td>
        </tr>
      </table>
    </form>
    </body>
    </html>

ajax.php：

<?
/////////////////  AJAX REQUESTS  /////////////////
switch($_REQUEST['action']){
    case('emailContactus'): if($_POST['name']=='a') { echo $value = 'User is A'; } else { echo $value = 'User is NOT A'; } 
                                break;
    case('addContact'):         echo 'Contact added!'; 
                                break;
    default:                    break;

}
?>

这个简单示例（此处的工作演示）中的问题是，虽然我希望数据响应被附加到#notifications div，但它被输出到文档的最顶部，甚至在加载任何 HTML 之前。请查看并建议需要更改的内容。此外，我很高兴听到您对我的代码的所有评论，因为我希望从一开始就指出正确的方向。谢谢！

4

0 回答 0