Ajax通过url发送参数

Posted 2023-03-14

【中文标题】Ajax通过url发送参数

【英文标题】：Ajax send parameters through url

【发布时间】：2013-06-21 04:03:55

【问题描述】：

我是 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和一个值，正确显示

【参考方案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 );
);

【参考方案2】：

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

希望这会有所帮助。

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

【参考方案3】：

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

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

而不是你所拥有的。

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

【讨论】：

使用 jQuery ajax 库时不需要。

没错，卡洛斯B。这仅在不使用 jQuery 时才需要，正如原始海报所做的那样。在我解释了不使用 jQuery 处理请求的正确方法之后，我指出使用 jQuery 是个好主意。

【参考方案4】：

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

【参考方案5】：

如果你想使用 ajax 发送多个字段值。你可以使用序列化函数。

例子：

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

        
    );