ajax 填充表单,动态填充表单与JQuery和Ajax

那么,这就是我所做的。

对于生成的每一个都响应按钮,我设置onClick事件传递我想被预先填充在我的形式向JS函数RespondMessage字段()

我同时也在页面底部制成的形式我用CSS隐藏了。 这个表单包含尽可能多的隐藏字段,因为我想要预先填充的数据,以及尽可能多的跨度,因为我想显示信息。

当我调用RespondMessage函数时,我用我调用函数的参数手动设置表单中的隐藏字段。 之后,我用我想要显示的信息填充我的跨度(例如,我为此消息设置收件人姓名)。

完成所有操作后,表单即可显示。所以在设置表单中的字段之后,我只是将表单从display:none传递给display:block,并且做了很多css技巧来使它们变得光滑美观。

所以现在你已经有了预先填好的表单,你只需要另一个函数来进行Ajax调用,以避免在每次响应后重新加载页面,并且你会用表单的提交按钮的onClick事件调用它。

我希望这个过程能帮助别人。

我不太确定这是否是最好的方法,我发现它非常脏并且可以利用,所以您需要比平时更多的服务器端检查,但它可以完成这项工作。

我没有提供代码,因为它大多都是真正专用于您正在设置的应用程序。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用 jQueryajax 写用户管理的修改功能的代码示例: HTML: ```html <!-- 用户修改表单 --> <form id="edit-form"> <label for="username">用户名:</label> <input type="text" name="username" id="username"> <label for="email">邮箱:</label> <input type="email" name="email" id="email"> <input type="submit" value="修改"> </form> ``` JavaScript: ```javascript // 当页面加载完成时执行 $(document).ready(function() { // 获取用户ID var userId = getQueryString('id'); // 获取用户信息 $.ajax({ url: '/api/users/' + userId, type: 'GET', success: function(data) { // 填充表单 $('#username').val(data.username); $('#email').val(data.email); } }); // 监听表单提交事件 $('#edit-form').submit(function(event) { // 阻止表单默认提交行为 event.preventDefault(); // 获取表单数据 var formData = $(this).serialize(); // 发送修改请求 $.ajax({ url: '/api/users/' + userId, type: 'PUT', data: formData, success: function(data) { // 修改成功,跳转到用户列表页 window.location.href = '/users'; } }); }); }); // 获取URL参数 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURIComponent(r[2]); } return null; } ``` 这里的 `/api/users` 是您的用户管理API的端点,支持 GET 和 PUT 方法。在页面加载完成时,使用 `$.ajax` 函数发送一个 GET 请求,以获取要修改的用户信息,并在成功回调函数中填充表单中。在表单提交事件中,使用 `$.ajax` 函数发送一个 PUT 请求,以修改用户信息,并在成功回调函数中跳转到用户列表页。`getQueryString` 函数用于获取 URL 参数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值