Question

我是ajax的新手，并认为我将成为一个有趣的实验进入我的项目。我创建了自己的灯箱类型功能，以便在我正在创建的网站上发送消息。当用户点击“发送消息”时，那就是灯箱出现的时候，在顶部我试图让它说“向用户发送消息”，其中用户是他们发送消息的用户的名字。我的lightbox 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>

注意：直接通过网址访问此页面时，为其提供u和值的参数，它会正确显示

Answer 1

使用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 );
});

Answer 2

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

希望这会有所帮助。

顺便说一下转换为jQuery ajax !!节省你的时间=）

Answer 3

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

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

而不是你拥有的东西。

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

Answer 4

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

Answer 5

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

示例：

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

        }
    });

Ajax通过url发送参数

5 个答案: