Question

我正在关注教程，目的是为每行创建一个包含单独提交按钮的表。不要质疑，这就是我想做的事。

我希望脚本向我的函数返回一个值，然后向用户显示一条消息（弹出窗口，或者可能添加到<div id="messages">或类似的东西。

所有按钮都会将数据发送到同一个PHP脚本。我想我会在jeditable插件之后对其进行建模，该插件将元素的id提交给脚本。

但是我从来没有写过任何自己的jquery，所以我遇到了问题。我的第一次测试

我当前的测试脚本$（this）.id无效：

$(document).ready(function(){
    $(".magic_button").click(function() {
        var data = $(this).id;
        alert (data); // test
        $("#messages")
                // trying to submit the data and retrieve response
            .load('/myscrpt.php','id=' + data); 
    });
});

测试html：

<div id="magic_button_form">
<form name="magic">
    <input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic" />
    <input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic" />
</form>
</div>
<div id="messages"></div>

所以，基本上，我需要弄清楚如何从调用元素中获取id，通过ajax提交它，然后处理返回的数据。它不起作用，因为首先我甚至无法获得呼叫按钮的ID。

编辑：

完整的，工作脚本Per Martin的答案：

Per Martin的解决方案，这是我在测试中提出的，它的工作原理。下面是html / jquery，然后是php脚本。 php脚本只进行简单的文本转换，将“magic_button_1”更改为“Magic Button 1”（对于“按钮”类的任何其他按钮也是如此）。

这里基本上是html / jquery：

<html>
<head>
<script>
$(document).ready(function(){ 
    });
    $(".magic_button").click(function() {
        var data = $(this).attr('id');
        //alert (data);
        $.ajax({
            type: "POST",
            url: "/controllers/clean/ajax/table.php",
            data: { 'id': data }
        }).done(function( msg ) {
            alert("Data Saved: " + msg);
        });
    });


});
</script>
</head>
<body>
<div id="magic_button_form">
<form name="magic">
   <!-- <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
    <label class="error" for="name" id="name_error">This field is required.</label> -->
    <input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic" />
    <input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic" />
</form>
</div>
</body>
</html>

这是php脚本（/controllers/clean/ajax/table.php）

$id = $_POST['id'];

$id = ucwords(implode(' ',explode('_',$id)));

echo $id;

Answer 1

您需要使用：

$(this).attr('id')

Here是jQuery ajax调用的文档，例如：

$.ajax({
   type: "POST",
   url: "some.php",
   data: { name: "John", location: "Boston" }
}).done(function( msg ) {
   alert( "Data Saved: " + msg );
});

Answer 2

在您的点击处理程序this中是对DOM元素本身的引用，因此您可以使用以下命令访问其ID：

this.id

或者，如果你想使用jQuery，你必须使用jQuery方法：

$(this).attr("id")

另外，我注意到您的提醒引用dataString，但应该是data。

修复这些问题后，Ajax .load()应该可以正常工作。

需要ajax按钮来发送/检索数据

2 个答案: