javascript - jquery 单选按钮上出现意外标记

Question

这是我的代码

// when the DOM is ready
    $(document).ready(function() {
    // 'click' because IE likes to choke on 'change'
    $('input[name=passedparameter]').click(function(e) {
        // prevent normal, boring, tedious form submission
        e.preventDefault();
        // send it to the server out-of-band with XHR
        $.post('http://localhost/topostthepost.php', function() {
            data: $(this).val(),
            success: function(resp) {
                if(resp == '1') {
                    alert('Saved successfully');
                } else {
                    alert('Oops, something went wrong!');
                }
            }
        });
    });
});

我对 jQuery 很陌生，甚至在 javascript 中也是如此，
但据我认为，这在逻辑上是可能的并且是正确的代码，

-当我打开响应页面(http://localhost/topostthepost.php)时，我做得很好，
-im 使用 php 框架，所以我需要发布“http://localhost/”，这样我就得到了正确的网址，
-当我运行页面时，它不会做任何事情，我检查元素(Chrome)它，它警告意外的 token

我错过了什么？ jquery/javascript 是否拒绝 $.post 中的 http:// ？

PS:代码记入karim79

Answer 1

这非常微妙:

// when the DOM is ready
    $(document).ready(function() {
    // 'click' because IE likes to choke on 'change'
    $('input[name=passedparameter]').click(function(e) {
        // prevent normal, boring, tedious form submission
        e.preventDefault();
        // send it to the server out-of-band with XHR
        $.post('http://localhost/topostthepost.php', function() {
        // Problem is here ========================= ^^^^^^^^^^   <<==========
            data: $(this).val(),
            success: function(resp) {
                if(resp == '1') {
                    alert('Saved successfully');
                } else {
                    alert('Oops, something went wrong!');
                }
            }
        });
    });
});

那里不应该有function，你传递的是一个对象。对于function，success后面的:变成了语法错误。 (data 之后的那个很好，因为它看起来像一个标签，但行末尾的逗号意味着我们仍在表达式中，因此 : 成功之后才是罪魁祸首。)

但请注意，这不是您调用 $.post 的方式，它类似于您调用 $.ajax 的方式。这是更新后的代码，没有语法错误并切换到 $.ajax:

// when the DOM is ready
    $(document).ready(function() {
    // 'click' because IE likes to choke on 'change'
    $('input[name=passedparameter]').click(function(e) {
        // prevent normal, boring, tedious form submission
        e.preventDefault();
        // send it to the server out-of-band with XHR
        $.ajax({
            url:     'http://localhost/topostthepost.php',
            type:    'POST',
            data:    $(this).val(),
            success: function(resp) {
                if(resp == '1') {
                    alert('Saved successfully');
                } else {
                    alert('Oops, something went wrong!');
                }
            }
        });
    });
});

但是，这一点看起来仍然很危险:

data:    $(this).val(),

这意味着您正在将一个字符串传递到调用中。如果您给出一个字符串，它必须已经被正确编码。因此，您必须对其进行编码，或者传递一个对象，以便 jQuery 可以为您对其进行编码:

data:    {someParameterName: $(this).val()},

...其中 someParameterName 是服务器将在表单数据服务器端中查找的内容。即将对象作为data参数传递给调用。该对象(在本例中)只有一个属性，我在上面将其称为 someParameterName，其值来自 $(this).val()。

当您向系统发送 POST 时，默认情况下它是 application/x-www-form-urlencoded 数据，它基本上由名称和值组成 - 例如、表单字段名称和这些字段的值。因此，在上面，我发送了一个字段 name someParameterName 和来自 $(this).val() 的值。因为我们将 data 作为对象传递，所以 jQuery 将为我们处理名称和值的编码。

在接收POST的服务器上，它将使用字段名称someParameterName)查找发布数据以获取值。

显然，您应该使用比 someParameterName 更合适的参数名称。

这是一个假设的示例，给出了多个字段:

data: {
    firstName: $("input[name=firstName]").val(),
    lastName:  $("input[name=lastName]").val()
}

我在那里发布了两个字段(参数)，名称为 firstName 和 lastName。