1

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

我希望脚本向我的函数返回一个值，然后它将向用户显示一条消息（弹出窗口，或者可能添加到 a<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。

编辑：

根据马丁的回答，完整的工作脚本：

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

这里基本上是 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;
4

2 回答 2

2

你需要使用：

$(this).attr('id')

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

$.ajax({
   type: "POST",
   url: "some.php",
   data: { name: "John", location: "Boston" }
}).done(function( msg ) {
   alert( "Data Saved: " + msg );
});
于 2012-08-17T00:54:02.980 回答
2

在您的点击处理程序this中是对 DOM 元素本身的引用，因此您可以通过以下方式访问其 id：

this.id

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

$(this).attr("id")

此外，我注意到您的警报参考dataString，但可能应该是data.

解决了这些问题后，Ajax.load()应该可以工作了。

于 2012-08-17T00:55:58.183 回答