栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用Jquery AJAX提交HTML表单

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用Jquery AJAX提交HTML表单

AJAX快速描述

AJAX只是异步JSON或XML(在大多数新情况下为JSON)。因为我们正在执行ASYNC任务,所以我们很可能会为我们的用户提供更愉快的UI体验。在这种情况下,我们使用AJAX进行FORM提交。

真的很快有4个一般的网络行动

GET
POST
PUT
,和
DELETE
; 这些直接与对应
SELECT/RetreivingDATA
INSERTING DATA
UPDATING/UPSERTING DATA
,和
DELETING DATA
。默认的HTML /
ASP.Net Webform / PHP /
Python或其他任何
form
操作都是要“提交”的,这是POST操作。因此,下面将全部描述执行POST。但是,有时使用http可能需要采取其他措施,并且可能希望利用
.ajax


我专门为您编写的代码(在代码注释中描述):

$("#formoid").submit(function(event) {    event.preventDefault();    var $form = $(this),    url = $form.attr('action');    var posting = $.post(url, {    name: $('#name').val(),    name2: $('#name2').val()  });    posting.done(function(data) {    $('#result').text('success');  });  posting.fail(function() {    $('#result').text('failed');  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="formoid" action="studentFormInsert.php" title="" method="post">  <div>    <label >First Name</label>    <input type="text" id="name" name="name">  </div>  <div>    <label >Last Name</label>    <input type="text" id="name2" name="name2">  </div>  <div>    <input type="submit" id="submitButton" name="submitButton" value="Submit">  </div></form><div id="result"></div>

文献资料

来自jQuery网站

$.post
文档。

示例 :使用ajax请求发送表单数据

$.post("test.php", $("#testform").serialize());

示例 :使用ajax发布表单并将结果放入div

<!DOCTYPE html><html>    <head>        <script src="http://pre.jquery.com/jquery-1.9.1.js"></script>    </head>    <body>        <form action="/" id="searchForm"> <input type="text" name="s" placeholder="Search..." /> <input type="submit" value="Search" />        </form>        <!-- the result of the search will be rendered inside this div -->        <div id="result"></div>        <script>  $("#searchForm").submit(function(event) {          event.preventDefault();          var $form = $(this),         term = $form.find('input[name="s"]').val(),         url = $form.attr('action');          var posting = $.post(url, {         s: term     });          posting.done(function(data) {         var content = $(data).find('#content');         $("#result").empty().append(content);     }); });        </script>    </body></html>

重要的提示

在不使用OAuth或至少使用HTTPS(TLS /
SSL)的情况下,请勿使用此方法存储安全数据(信用卡号,SSN,与PCI,HIPAA或登录相关的任何内容)



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/391154.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号