Question

我有一个简单的HTML表格，其中一列显示是/否选项 - 当用户将“是”更改为“否”或反之时，它应该通过AJAX调用简单的PHP脚本来更新数据库中的记录。

这是表格的样子：

<table>
<thead>
    <tr>
        <th scope="col">Description</th>
        <th scope="col">Type</th>
        <th scope="col">Completed</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Welcome Email</td>
        <td>Email</td>
        <td>
            <div class="radio" id="radio1">
                <label><input checked id="1" name="completed1" type="radio" value="Yes">Yes</label>
                <label><input id="1" name="completed1" type="radio" value="No">No</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>Follow Up Phone Call</td>
        <td>Phone call</td>
        <td>
            <div class="radio" id="radio2">
                <label><input id="2" name="completed2" type="radio" value="Yes">Yes</label>
                <label><input checked id="2" name="completed2" type="radio" value="No">No</label>
            </div>
        </td>
    </tr>
</tbody>

当用户对其中一个单选按钮进行更改时，我已经调用了基本脚本 - 现在我需要传递一些参数，这样我就可以更新数据库中的正确记录，然后更新类的父DIV，如果有/没有更新数据库时出错，它会显示红色/绿色边框。这是我的剧本：

$(document).ready(function() {
    $("input[type='radio']").change(function(){
        $.ajax({
        url: "updateTask.php",
        success: function(data) {
            $("#storeManager").html(data).addClass("has-success");
        },
        error: function (data) {
            $("#storeManager").html(data).addClass("has-error");
        }
        }); 
    });
});

我需要传入所选单选按钮的值（例如上例中的1或2）以及单选按钮DIV的ID（例如上例中的radio1或radio2）。我在这一点上难过。

Answer 1

$(document).ready(function() {
    $("input[type='radio']").change(function(){
        $.ajax({
        url: "updateTask.php",
        method: "POST",
       data: { name: "Yourname", location: "yourLocation" },
        success: function(data) {
            $("#storeManager").html(data).addClass("has-success");
        },
        error: function (data) {
            $("#storeManager").html(data).addClass("has-error");
        }
        }); 
    });
});

使用数据：添加数据

Answer 2

您只需要发送data参数以及ajax调用。尝试这样的事情：

$(document).ready(function() {
    $("input[type='radio']").change(function(){
        $.ajax({
        url: "updateTask.php",
        data: {
        id: $(this).closest('div').attr('id'),
        value: $(this).val()
        },
        success: function(data) {
            $("#storeManager").html(data).addClass("has-success");
        },
        error: function (data) {
            $("#storeManager").html(data).addClass("has-error");
        }
        }); 
    });
});

将参数传递给AJAX脚本并指定要更新的DIV

2 个答案: