2

我是 ajax 的新手，我认为我会是一个有趣的实验来投入我的项目。我创建了自己的灯箱类型功能，用于在我正在创建的网站上发送消息。当用户点击“发送消息”时，灯箱就会出现，在顶部我试图让它说“向用户发送消息”，其中用户是他们发送消息的用户的名称. 我的灯箱 html 元素实际上位于一个单独的网页上，这就是我使用 ajax 的原因。这是我到目前为止所拥有的，似乎无法弄清楚问题所在：

user.php 页面

<div id = "pageMiddle"> // This div is where all the main content is.
  <button onclick = "showMessageBox(UsersName)">Send Message</button>
</div>

注意：用户名正确地传递到 javascript 函数中，我已经检查了很多。

main.js 页面

function showMessageBox(user){
  alert(user); // where i checked if username passes correctly
  var ajaxObject = null;
  if (window.XMLHttpRequest){
    ajaxObject = new XMLHttpRequest();
  }else if (window.ActiveXObject){
    ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (ajaxObject != null){
    ajaxObject.open("GET", "message_form.php", true);
    ajaxObject.send("u="+user);
  }else{
    alert("You do not have a compatible browser");
  }
  ajaxObject.onreadystatechange = function(){
    if (ajaxObject.readyState == 4 && ajaxObject.status == 200){
      document.getElementById("ajaxResult").innerHTML = ajaxObject.responseText;
      // use jquery to fade out the background and fade in the message box
      $("#pageMiddle").fadeTo("slow", 0.2);
      $("#messageFormFG").fadeIn("slow");
    }
  };
}

message_form.php 页面

<div id = "messageFormFG">
  <div class = "messageFormTitle">Sending message to <?php echo $_GET['u']; ?></div>
</div>

注意：直接通过URL访问这个页面时，给它一个参数u和一个值，就可以正确显示

4

5 回答 5

6

使用 jQuery.ajax(); http://api.jquery.com/jQuery.ajax/

$.ajax({
  type: "GET",
  url: "message_form.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});
于 2013-06-24T15:26:31.083 回答
0

奇怪的做法（老派）:) 无论如何，我认为问题可能是您正在将整个 html 页面加载到 div ！意思是标签和东西，了解问题的好方法是使用调试器并查看 ajaxObject.responseText 中的内容。

希望这可以帮助。

顺便说一句，转换为 jQuery ajax！为您节省大量时间 =)

于 2013-06-24T15:27:26.473 回答
0

我相信您需要在发送数据之前添加请求标头。所以你会有这个：

ajaxObject.open("GET", "message_form.php", true);
ajaxObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxObject.send("u="+encodeURIComponent(user));

而不是你所拥有的。

但是，允许库为您执行此操作可能是个好主意。看起来您已经加载了 jQuery，那么为什么不让它处理您的 AJAX 请求呢？

于 2013-06-24T15:30:47.813 回答
0

在看了一些来自 bucky 的 ajax 教程后，我想通了 :) aka thenewboston。如果我使用 GET 方法，我只需将参数添加到 .open 函数中 url 的末尾，而不是通过 send 函数传递它（就像你使用 post 方法一样）。

于 2013-07-03T21:38:52.503 回答
0

如果你想使用 ajax 发送字段值的数量。你可以使用 serilalize 函数。

例子：

jQuery.ajax({
        url: 'filenamehere.php',
        type: 'post',
        data: $("#formidhere").serialize(),
        success: function(data){
    ..//

        }
    });
于 2015-03-30T05:17:50.907 回答