Question

我想使用AJAX更新div标签。单击“显示”按钮时，将对下拉菜单中指定的页面发出AJAX请求。该页面上包含的JSON对象将显示在标记为“其他页面”的div内。我将使用多个JSON文件。如何使用下拉菜单更新div标签？

JS：

function start() 
{
    $("#clickme").text("Calling server");

    $.ajax(
    {
        url : "mikey.json", 
        success : callbackFunction, 
        error : errorFunction, 
        dataType : 'json'
    });
}

function callbackFunction(data, info) 
{
    $("#clickme")
        .text("result: " + (data && data.name ? data.likes: "(No likes)"));
}

function errorFunction(data, info) 
{
    $("#clickme").text("error occurred:" + info);
}

HTML：

<div id="clickme" onclick="start()">Other page</div>
<form method="post" id="frm">
    <table>
        <tr>
            <td>Current roommate: </td>
            <td>
                <select name="room" id="rooms">
                    <option value="1" id="mi">Mikey</option>
                    <option value="2" id="sa">Sarah</option>
                    <option value="3" id="er">Sam</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Display" >
            </td>
        </tr>
    </table>
</form>

Answer 1

通过下拉列表触发事件，您只需执行此操作

$(document).ready(function() {
    $('#rooms').on('change', function() {
        var data = $(this).val();  //you can retrieve the drop down list value
        start();
    });
}

并且在start方法中，你可以调用ajax，然后在回调Success上，你可以修改div。（正如你现在所说）

Answer 2

您需要在select选项中指定json的值，并在提交时将它们传递给ajax函数。

HTML：

<div id="clickme">Other page</div>
<form method="post" id="frm">
    <table>
        <tr>
            <td>Current roommate: </td>
            <td>
                <select name="room" id="rooms">
                    <option value="mikey.json" id="mi">Mikey</option>
                    <option value="sarah.json" id="sa">Sarah</option>
                    <option value="sam.json" id="er">Sam</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Display">
            </td>
        </tr>
    </table>
</form>

jQuery的：

$(document).ready(function(){
    $("#frm").submit(function(event){
        event.preventDefault();
        var jsonUrl = $("#rooms").val();
        $("#clickme").text("Calling Server");
        $.ajax({
            url : jsonUrl, 
            data: $("#frm").serialize(),
            dataType : 'json',
            success: function (data) {
                $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)"));
            }, 
            error : function(jqXHR, textStatus, errorThrown) {
                $("#clickme").text("error occurred:" + errorThrown);
            }, 
            dataType : 'json'
        });
    });
});

如果您希望div在用户点击选项时更改（而不是等待他们提交表单），您可以执行以下操作：

$(document).ready(function(){
      $("#rooms").change(function(){
        var jsonUrl = $(this).val();
        $("#clickme").text("Calling Server");
        $.ajax({
            url : jsonUrl, 
            data: $("#frm").serialize(),
            dataType : 'json',
            success: function (data) {
                $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)"));
            }, 
            error : function(jqXHR, textStatus, errorThrown) {
                $("#clickme").text("error occurred:" + errorThrown);
            }, 
            dataType : 'json'
        });
    });
});

使用ajax通过下拉列表更新div标签

2 个答案: