javascript - 如何使用 AJAX 将变量从 JavaScript 发送到 PHP 脚本

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 7 年前。

Improve this question

对于我的项目，我需要执行以下操作:

1. 用户在 Canvas 上按下鼠标(html 页面)
2. JavaScript函数保存被按下的点的坐标
3. 将此信息发送到 PHP 脚本
4. PHP 脚本将此数据添加到 MySQL 数据库
5. 其他坐标放入 JSON 中并发送给客户端并呈现在同一 Canvas 上

现在，我已经研究了步骤 3 的问题(这是我不知道该怎么做的事情)。有不同的方式，我选择了这两种:

1. Using Ajax
2. HtmlRequest (answer 3)

根据我的情况，最好选择哪种方式？还有更好/正确的方法吗？

Answer 1

我不会说一定有一种“正确”的方法来做到这一点，但是您可以遵循一些好的想法。其中一个想法是使用 HTTP REST verbs :使用 POST 进行“创建”操作，使用 GET 进行“读取”操作。鉴于此，您应该向服务器发出 AJAX POST 请求，并通过 POST 参数传递坐标。

// will use this to turn an object into a url encoded string
var serializeObject = function(obj) {
  var output = '';
  for(var attr in obj) {
    if(obj.hasOwnProperty(attr)) {
      output += attr + '=' + obj + '&';
    }
  }
  return output.slice(0, -1);
};
var url = 'http://www.example.com/save.php';
// you need to serialize your data into key value pairs like the following
var exampleCoords = {
  x: 10,
  y: 20,
  z: 30
};
// postData will be x=10&y=20&z=30
var postData = serializeObject(exampleCoords);

var request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", postData.length);
request.setRequestHeader("Connection", "close");

// this function gets called when the request changes
request.onreadystatechange = function() {
    // request was successful
    if(request.readyState == 4 && request.status == 200) {
        alert(request.responseText);
    }
}
request.send(postData);

使用 jQuery，你可以大大简化你的代码(尽管它在幕后做的事情几乎完全相同):

var url = 'http://example.com/save.php';
var coords = {
   x: 10,
   y: 20,
   z: 30
};
$.post(url, coords).then(function(response) {
   console.log(response);
});

您可以使用 $_POST['x'] 在 PHP 中访问这些变量，请确保在 MySQL 中使用这些数据之前对其进行清理( htmlentities 等)。

郑重声明，AJAX 和 XMLHttpRequest 是同一事物的不同名称，AJAX 只是指异步 Javascript 和 XML(如 XMLHttpRequest 中所示)， XMLHttpRequest 是用于执行 AJAX 请求的内置对象