[已解决]jqueryAjax方法访问JSON文件返回数据

赵屿 · 发表于 3 天前

jQuery在H-bulider上完整代码能运行

利用Ajax方法访问JSON文件同时返回数据；
（1）、可以利用Ajax访问JSON文件并获得数据；
（2）、将获得数据添加到表格并对表格的样式进行合理的设置；
（3）、可以实现“修改”功能的；
（4）、可以实现“删除”功能的

最佳答案

月排行榜 / 总排行榜

FishC

3 天前

赵屿发表于 2024-12-18 17:07
将以下代码用ajax方法传参

jQuer ...

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal form</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        label,
        input {
            display: block;
        }

        input.text {
            margin-bottom: 12px;
            width: 95%;
            padding: .4em;
        }

        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }

        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }

        div#users-contain table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }

        div#users-contain table td,
        div#users-contain table th {
            border: 1px solid #eee;
            padding: .6em 10px;
            text-align: left;
        }

        .ui-dialog .ui-state-error {
            padding: .3em;
        }

        .validateTips {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
</head>

<body>
    <div id="dialog-form" title="添加新用户">
        <p class="validateTips">All form fields are required.</p>

        <form>
            <fieldset>
                <label for="name">姓名</label>
                <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
                <label for="email">邮箱</label>
                <input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all">
                <label for="password">密码</label>
                <input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all">
            </fieldset>
        </form>
    </div>

    <div id="dialog-form1" title="修改用户"></div>
    <div id="dialog-form2" title="确定删除吗？"></div>

    <div id="users-contain" class="ui-widget">
        <h1>Existing Users:</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header">
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>john.doe@example.com</td>
                    <td>johndoe1</td>
                    <td>
                        <button class="edit">修改</button>
                        <button class="del">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id="create-user">添加新用户</button>
    <button id="bt">Load Data</button>

    <script>
        $(function() {
            var dialog, form, name, email, password, dialog1, form1, dialog2, form2, tips = $(".validateTips");

            function updateTips(t) {
                tips.text(t).addClass("ui-state-highlight");
                setTimeout(function() {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

            function addUser() {
                var valid = true;

                if (valid) {
                    var userData = {
                        name: $("#name").val(),
                        email: $("#email").val(),
                        password: $("#password").val()
                    };
                    // 使用 Ajax 发送用户数据
                    $.ajax({
                        type: 'POST',
                        url: 'add_user.php', // 替换为您的后端处理URL
                        data: userData,
                        success: function(response) {
                            $('#users tbody').append("<tr>" +
                                "<td>" + userData.name + "</td>" +
                                "<td>" + userData.email + "</td>" +
                                "<td>" + userData.password + "</td>" +
                                "<td><button class='edit'>修改</button> <button class='del'>删除</button></td>" +
                                "</tr>");
                            dialog.dialog("close");
                        }
                    });

                }
                return valid;
            }

            dialog = $("#dialog-form").dialog({
                autoOpen: false,
                height: 400,
                width: 350,
                modal: true,
                buttons: {
                    "添加": addUser,
                    "取消": function() {
                        dialog.dialog("close");
                    }
                },
                close: function() {
                    form[0].reset();
                }
            });

            form = dialog.find("form").on("submit", function(event) {
                event.preventDefault();
                addUser();
            });

            $("#create-user").button().on("click", function() {
                dialog.dialog("open");
            });

            $('body').on("click", '.edit', function() {
                dialog1.dialog("open");
            });

            $('body').on("click", '.del', function() {
                $(this).closest('tr').remove();
            });

            $('#bt').click(function() {
                $.ajax({
                    type: 'GET',
                    url: 'data.json',
                    data: { 'username': 'lisi' },
                    success: function(data) {
                        console.log(data);
                    },
                    error: function() {
                        console.error('错误');
                    }
                });
            });
        });
    </script>
</body>

</html>

这段代码演示了如何将表单数据通过Ajax方法传递给服务器，并在表格中动态更新用户信息。在`addUser`函数中，使用`$.ajax`发送POST请求，将用户信息（姓名、邮箱、密码）发送到服务器。数据提交后，成功回调内将新用户添加到HTML表格中。请确保后端正确处理该请求（在示例中为`add_user.php`）。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC · 发表于 3 天前

赵屿发表于 2024-12-18 17:07
将以下代码用ajax方法传参

jQuer ...

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal form</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        label,
        input {
            display: block;
        }

        input.text {
            margin-bottom: 12px;
            width: 95%;
            padding: .4em;
        }

        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }

        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }

        div#users-contain table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }

        div#users-contain table td,
        div#users-contain table th {
            border: 1px solid #eee;
            padding: .6em 10px;
            text-align: left;
        }

        .ui-dialog .ui-state-error {
            padding: .3em;
        }

        .validateTips {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
</head>

<body>
    <div id="dialog-form" title="添加新用户">
        <p class="validateTips">All form fields are required.</p>

        <form>
            <fieldset>
                <label for="name">姓名</label>
                <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
                <label for="email">邮箱</label>
                <input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all">
                <label for="password">密码</label>
                <input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all">
            </fieldset>
        </form>
    </div>

    <div id="dialog-form1" title="修改用户"></div>
    <div id="dialog-form2" title="确定删除吗？"></div>

    <div id="users-contain" class="ui-widget">
        <h1>Existing Users:</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header">
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>john.doe@example.com</td>
                    <td>johndoe1</td>
                    <td>
                        <button class="edit">修改</button>
                        <button class="del">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id="create-user">添加新用户</button>
    <button id="bt">Load Data</button>

    <script>
        $(function() {
            var dialog, form, name, email, password, dialog1, form1, dialog2, form2, tips = $(".validateTips");

            function updateTips(t) {
                tips.text(t).addClass("ui-state-highlight");
                setTimeout(function() {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

            function addUser() {
                var valid = true;

                if (valid) {
                    var userData = {
                        name: $("#name").val(),
                        email: $("#email").val(),
                        password: $("#password").val()
                    };
                    // 使用 Ajax 发送用户数据
                    $.ajax({
                        type: 'POST',
                        url: 'add_user.php', // 替换为您的后端处理URL
                        data: userData,
                        success: function(response) {
                            $('#users tbody').append("<tr>" +
                                "<td>" + userData.name + "</td>" +
                                "<td>" + userData.email + "</td>" +
                                "<td>" + userData.password + "</td>" +
                                "<td><button class='edit'>修改</button> <button class='del'>删除</button></td>" +
                                "</tr>");
                            dialog.dialog("close");
                        }
                    });

                }
                return valid;
            }

            dialog = $("#dialog-form").dialog({
                autoOpen: false,
                height: 400,
                width: 350,
                modal: true,
                buttons: {
                    "添加": addUser,
                    "取消": function() {
                        dialog.dialog("close");
                    }
                },
                close: function() {
                    form[0].reset();
                }
            });

            form = dialog.find("form").on("submit", function(event) {
                event.preventDefault();
                addUser();
            });

            $("#create-user").button().on("click", function() {
                dialog.dialog("open");
            });

            $('body').on("click", '.edit', function() {
                dialog1.dialog("open");
            });

            $('body').on("click", '.del', function() {
                $(this).closest('tr').remove();
            });

            $('#bt').click(function() {
                $.ajax({
                    type: 'GET',
                    url: 'data.json',
                    data: { 'username': 'lisi' },
                    success: function(data) {
                        console.log(data);
                    },
                    error: function() {
                        console.error('错误');
                    }
                });
            });
        });
    </script>
</body>

</html>

这段代码演示了如何将表单数据通过Ajax方法传递给服务器，并在表格中动态更新用户信息。在`addUser`函数中，使用`$.ajax`发送POST请求，将用户信息（姓名、邮箱、密码）发送到服务器。数据提交后，成功回调内将新用户添加到HTML表格中。请确保后端正确处理该请求（在示例中为`add_user.php`）。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

FishC · 发表于 3 天前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax JSON Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'data.json',
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(i, item) {
                        var row = '<tr>';
                        row += '<td>' + item.name + '</td>';
                        row += '<td>' + item.age + '</td>';
                        row += '<td><button class="edit">修改</button></td>';
                        row += '<td><button class="delete">删除</button></td>';
                        row += '</tr>';
                        $('#data-table').append(row);
                    });

                    $('.edit').click(function() {
                        var row = $(this).closest('tr');
                        var name = prompt('请输入新的名字:', row.find('td:eq(0)').text());
                        if (name) {
                            row.find('td:eq(0)').text(name);
                        }
                    });

                    $('.delete').click(function() {
                        $(this).closest('tr').remove();
                    });
                }
            });
        });
    </script>
</head>
<body>
    <h1>JSON数据表格</h1>
    <table id="data-table">
        <tr>
            <th>名称</th>
            <th>年龄</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
    </table>
</body>
</html>

此示例代码利用了jQuery的Ajax功能来请求名为`data.json`的JSON文件，并将数据动态添加到HTML表格中。代码还包括“修改”和“删除”功能，您可以根据提示修改表格中的内容或删除表格行。请确保`data.json`文件在同一目录下，并格式正确。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

赵屿 · 发表于 3 天前

FishC 发表于 2024-12-18 16:08
此示例代码利用了jQuery的Ajax功能来请求名为`data.json`的JSON文件，并将数据动态添加到HTML表格中。 ...

将以下代码用ajax方法传参

<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
label,
input {
display: block;
}

input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}

fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}

h1 {
font-size: 1.2em;
margin: .6em 0;
}

div#users-contain {
width: 350px;
margin: 20px 0;
}

div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}

div#users-contain table td,
div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}

.ui-dialog .ui-state-error {
padding: .3em;
}

.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form, name, email, password, th

tips = $(".validateTips");

function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}

function addUser() {
var valid = true;

if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + $("#name").val() + "</td>" +
"<td>" + $("#email").val() + "</td>" +
"<td>" + $("#password").val() + "</td>" +
"<td>" +
"<button class='edit'>修改</button>" +
"<button class='del'>删除</button>" +
"</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}

dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"添加": addUser,
取消: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
//allFields.removeClass( "ui-state-error" );
}
});

form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});

$("#create-user").click(function() {
dialog.dialog("open");
});
/*仿照添加新用户完成修改功能*/
//1、单击修改按钮弹出对话框
$('body').on("click", '.edit', function() {
//获取修改按钮左侧的姓名、邮箱等
th = $(this).parent().prevAll();
name = th.eq(2).text();
email = th.eq(1).text();
password = th.eq(0).text();
//将获取到的三个值分别赋值给 "#dialog-form1"
$('#name1').val(name);
$('#email1').val(email);
$('#password1').val(password);
dialog1.dialog("open");
});

//2、利用jQuery-ui 框架让表单弹出
dialog1 = $("#dialog-form1").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"确认": edit,
取消: function() {
dialog1.dialog("close");
}
},
close: function() {
form1[0].reset();
//allFields.removeClass( "ui-state-error" );
}
});

form1 = dialog1.find("form").on("submit", function(event) {
event.preventDefault();
edit();
});

function edit() {
name = $('#name1').val();
email = $('#email1').val();
password = $('#password1').val();
th.eq(2).text(name);
th.eq(1).text(email);
th.eq(0).text(password);
dialog1.dialog("close");
}

//删除
$('body').on("click", '.del', function() {
th = $(this).parent().parent('tr');

dialog2.dialog("open");
});

//2、利用jQuery-ui 框架让表单弹出
dialog2 = $("#dialog-form2").dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
buttons: {
"删除": del,
取消: function() {
dialog2.dialog("close");
}
},
close: function() {
form2[0].reset();
//allFields.removeClass( "ui-state-error" );
}
});

form2 = dialog2.find("form").on("submit", function(event) {
event.preventDefault();
del();
});

function del() {

th.remove()
dialog2.dialog("close");
}

});
</script>
</head>
<body>

<div id="dialog-form" title="添加新用户">
<p class="validateTips">All form fields are required.</p>

<form>
<fieldset>
<label for="name">姓名</label>
<input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
<label for="email">邮箱</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
<label for="password">密码</label>
<input type="password" name="password" id="password" value=""
class="text ui-widget-content ui-corner-all">


<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>

<div id="dialog-form1" title="修改当前用户">
<p class="validateTips">All form fields are required.</p>

<form>
<fieldset>
<label for="name">姓名</label>
<input type="text" name="name" id="name1" value="" class="text ui-widget-content ui-corner-all">
<label for="email">邮箱</label>
<input type="text" name="email" id="email1" value="" class="text ui-widget-content ui-corner-all">
<label for="password">密码</label>
<input type="password" name="password" id="password1" value=""
class="text ui-widget-content ui-corner-all">


<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>

<div id="dialog-form2" title="删除当前用户">


<form>

<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">

</form>
</div>

<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>姓名</th>
<th>邮箱</th>
<th>密码</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
<td>
<button class='edit'>修改</button>
<button class='del'>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">添加新用户</button>

<script>
$('#bt').click(function() {
$.ajax({
//传参方式
type: 'get',
//前端要访问的服务器地址
url: 'data.json',
//前端要向服务器传的数据
data: {
'username': 'lisi'
},

success: function(data) {
tab = $('<table></table>')
for (var i = 0; i < data.length; i++) {
li = "<tr>" +
"<td>" + data[i].userid + "</td>" +
"<td>" + data[i].username + "</td>" +
"<td>" + data[i].userage + "</td>" +
"</tr>"
tab.append(li);
}
$('body').append(tab);
// console.log(JSON.parse(data))
},
error: function() {
console.log('错误')
}
})
})
</script>

</body>
</html>

账号		自动登录	找回密码
密码			立即注册