jQuery ajax中没有定义变量

Question

我通常使用javascript ajax，一切工作都很好，但wordpress需要jquery ajax，我不熟悉。

为什么没有定义下面代码中描述的变量？

var option = "'USER_ID': 'my id is 32',"
var note = "'this is my first note'";

    jQuery(document).ready(function($) {

        var data = {
            'action': 'my_action',
             option   //this does not work. <--- WHAT DO YOU MEAN DOES NOT WORK?
            'USER_NOTE': note  //this does not work. <--- WHAT DO YOU MEAN DOES NOT WORK?
            
        };

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        jQuery.post(ajaxurl, data, function(response) {
            alert('Got this from the server: ' + response);
        });
    });

Answer 1

下面是您的问题的代码页：https://codepen.io/geoidesic/pen/wvoeden

代码如下：

var option = "'USER_ID': 'my id is 32',"
var note = "'this is my first note'";


jQuery(document).ready(function($) {
  console.log(option); // proves that option is in scope
  console.log(note); // proves that note is in scope
  var data = {
            'action': 'my_action',
             option,
            'USER_NOTE': note
        };
  console.log(data); // proves that data is defined as specified

  jQuery.post('https://jsonplaceholder.typicode.com/posts', data, (response) => {
    console.log("response: ", response); // proves that the post request is working
  })
});

如果您查看控制台。您可以看到任何未定义的变量都没有问题。如果查看“网络”选项卡，可以看到POST请求已发送。

这也可以作为一个例子，说明如何更好地以人们能够实际帮助你的方式来表达你的问题，即使用CodePen或类似的方式。

Answer 2

或者，只需将所有内容移到jQuery.ready中即可

  jQuery(document).ready(function($) {
    
    var option = "'USER_ID': 'my id is 32',"
    var note = "this is my first note";

    var data = {
        'action': 'my_action',
        option,                    
        'USER_NOTE': note           
        
    };

    jQuery.post(ajaxurl, data, function(response) {
        alert('Got this from the server: ' + response);
    });
  });

Answer 3

这是因为datajson对象没有正确定义。您需要将选项定义更改为有效的json对象：

var option = "'USER_ID': 'my id is 32',"

至

var option = {'USER_ID': 'my id is 32'}

并以不同的方式添加它,这样它就可以被正确地合并：

var data = {
        'action': 'my_action',
        ...option,                    
        'USER_NOTE': note           
        
    };

那应该能解决你的问题了。