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

Closed. This question is opinion-based。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。
                        
                        4年前关闭。
                                                                                            
                
        
对于我的项目，我需要执行以下操作：


用户将鼠标按下在画布上（html页面）
JavaScript函数保存已按下的点的坐标
将此信息发送到PHP脚本
PHP脚本将此数据添加到MySQL数据库
其他坐标放入JSON中并发送回客户端，并显示在同一画布上


现在，我研究了第3步的问题（我不知道该怎么做）。有不同的方法，我选择了这两种：


Using Ajax
HtmlRequest (answer 3)


在我的情况下，哪一种是最佳选择？有没有更好/正确的方法呢？

最佳答案

我不会说有一定的“正确”方法可以执行此操作，但是您可以遵循一些好的想法。这些想法之一是使用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请求的内置对象

关于javascript - 如何使用AJAX将变量从JavaScript发送到PHP脚本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31813774/