AJAX固执吗?

时间:2015-02-02 00:22:18

标签: javascript php html ajax

我一直在努力学习一些AJAX。这是我的代码,如果有人能指出我出错的方向,这将是一个很大的帮助!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<!DOCTYPE html>

<head>
  <meta charset="UTF-8"></meta>

  <style media="print">
    #goBack,
    #printRow {
      display: none;
    }
  </style>

</head>

<body id="body" class="body">


  <table>
    <form id="addUser" onsubmit="return false;">
      <tr>
        <td>Username:</td>
        <td>
          <input name="user" />
        </td>
        <td rowspan="2">
          <button id="createUser" name="submit" onclick="getAddUserStatus()">Add User</button>
        </td>
      </tr>
      <tr>
        <td>Password:</td>
        <td>
          <input name="pass" type="password" />
        </td>
      </tr>
    </form>
  </table>

  <div id="container" class="container">
    div contents here
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script type="text/javascript" src=""></script>
  <script>
    function getAddUserStatus() {
      $('#addUser').on('submit', function() {
        var postData = $(this).serializeArray();
        $.ajax({
          url: 'response.php',
          data: postData,
          type: "POST",
        }).done(function(data) {
          console.debug(data);
          marker = JSON.stringify(data.message);
          console.debug(marker);
          alert(marker);
          $('.container').html(marker); // Or whatever

        });
      });
    }
  </script>
</body>

</html>

基本上我要求帮助的是我需要将json的响应写入DIV,json响应的例子是

Object {
  saved: false,
  user: "discoverexcel",
  message: "User already exists"
}

我已经想出如何从中获取“消息”并将其投入警报,但DIV没有运气。我不知道我哪里出错了。

接下来的重点是,为什么页面重新加载?我的印象是使用AJAX的一个很好的理由,所以这里的任何东西都非常受欢迎!

另外,我的最后一个问题是,如果我要在页面上执行多个这样的操作,我将如何进行此操作?每次点击它们时,将每一个嵌套在一个新函数中?另外,加载图像看起来如何显示状态?

1 个答案:

答案 0 :(得分:0)

耶!我终于明白了,谢谢大家的支持!澄清一下,我在这里找到了答案: Ajax response inside a div

  

选择器应该是.result而不是#result

这是小事,谢谢大家!