jqueryAjax方法访问JSON文件返回数据,Web开发,技术交流,鱼C论坛

赵屿发表于 3 天前

jqueryAjax方法访问JSON文件返回数据

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.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.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.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.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.userid + "</td>" +
"<td>" + data.username + "</td>" +
"<td>" + data.userage + "</td>" +
"</tr>"
tab.append(li);
}
$('body').append(tab);
// console.log(JSON.parse(data))
},
error: function() {
console.log('错误')
}
})
})
</script>

</body>
</html>

页: [1]

鱼C论坛's Archiver

jqueryAjax方法访问JSON文件返回数据