分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

form表单提交转为ajax方式提交

发布时间:2023-09-06 01:54责任编辑:赖小花关键词:form表单
<form action="xxx" method="get"> ?//action的值是请求的url地址 ???<div class="form-group"> ???????<label for="name">姓名</label> ???????<input type="text" class="form-control" name="name"> ???</div> ???<div class="form-group"> ???????<label for="jobNumber">工号</label> ???????<input type="number" class="form-control" name="jobNumber"> ???</div> ???<div class="form-group"> ???????<label for="nation">民族</label> ???????<input type="text" class="form-control" name="nation"> ???</div> ???<div class="form-group"> ???????<label for="gender">性别</label> ???????<input type="text" class="form-control" name="gender"> ???</div> ???<div class="modal-footer"> ??? <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>   <button type="submit" class="btn btn-primary">提交</button>  ???</div></form> 

  要转为ajax方式提交,需要做以下几个改变:

1. 将form元素的属性action和method去掉,添加id="myForm",form元素就变为<form id="myForm">

2. 将提交按钮的button的type="submit"改为type="button"

3. 在js文件中写入

$(function(){ ???$.ajax({ ???type : "GET", ???url : "xxx", ??????success : function (data) { ????????console.log(data); ??//data即为后台返回的数据 ???}});

  

这样,就可以愉快地将form表单提交的方式转为ajax请求的方式啦。

PS:如果想要在ajax请求中加入自定义的HTTP header,则在ajax请求中加入

beforeSend: function(request) {  request.setRequestHeader("Content-type", "application/json"); ????//通过这种方法可以设置自定义HTTP头字段},

  

form表单提交转为ajax方式提交

原文地址:https://www.cnblogs.com/agansj/p/9033353.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved