Ajax 将值从文本框保存到服务器

Question

刚刚发现 Ajax 是什么，我想构建一个简单的 Ajax/Jquery 函数，它获取文本框的值并在单击按钮时将其发布到服务器。该按钮是一个带有悬停事件的 ui 图标到它附加在按键上..我尝试将它放在一起，但是 firebug 控制台读取语法错误..请帮助..

    $(function () {
        $('.solo1').after('<span class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" title="Save" style="float:left; height:20px;" onclick="function save (value)"></span><br />')// ui icon
    .keypress(function() {
        $(this).next('.saveButton').show();//appends ui icon
    });
});


function save(value) {
    $.ajax({
        url: "/*ServerURL*/",
        type: "POST",
        data: '{ $("#craven1") : "' + value + '" }',
        data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1").val() + "}",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log(data);
        },
    });
}
</script> 

<div id="featherbone">
<input class="solo1" id="craven1"/>
<input class="solo1" id="craven2"/>
<input class="solo1" id="craven3"/>
<input class="solo1" id="craven4"/>
<input class="solo1" id="craven5"/>
</div>

Answer 1

单击 UI 按钮时是否收到错误消息？在这种情况下，我认为语法问题出在 .solo1 元素之后添加的 HTML 中，特别是在 onclick 属性中：

$('.solo1').after('<span ... onclick="function save (value)"</span><br/>')

应该是：

$('.solo1').after('<span ... onclick="save (value)"</span><br/>')

因为您希望调用函数 save （未定义，因此删除了关键字来自 onclick 属性的 function）。

但是查看您的代码并阅读您的描述，我认为您希望将与按钮相邻的输入元素的值传递到函数中？

在这种情况下，更好的解决方案是首先创建 UI 按钮，然后为每个按钮添加单击处理程序：

// Create button and then add it after each input
var button = $('<span ... ></span><br/>');
$('.solo1').after(button);

// Now that the buttons are created, find them and give each a click handler
$('.saveButton').click(function() {
  // Get value from the input element that this button was added after
  var value = $(this).prev().val();

  // Now call the save method with the value
  save(value);
});

工作示例： http: //jsfiddle.net/h78hw/

Answer 2

在这里运行 JSLint：http://jsfiddle.net/kp6hV/ 显示：

Error:
Problem at line 14 character 92: Duplicate member 'data'.
data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1...

Problem at line 19 character 10: Extra comma.
},

Implied global: $ 1,2,4,10,14, console 18

也就是说，有一个正如我上面评论的那样，“成功”函数后面有额外的逗号，以及重复的“数据”成员。

编辑：无错误：

function save(value) {
  $.ajax({
    url: "/*ServerURL*/",
    type: "POST",
    //data: '{ $("#craven1") : "' + value + '" }', // Not sure what's going on here
    data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1").val() + "}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
    }
  });
}