表单数据处理与Ajax应用-优快云博客

本文链接：https://blog.youkuaiyun.com/wang_ouyangsima/article/details/73106031

本文介绍了一个使用HTML与JavaScript实现的表单数据处理示例，包括如何通过Ajax将表单数据序列化并发送到服务器，以及如何接收服务器响应并进行前端提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单：    <form class="form-horizontal" id="validation-form" method="post">
                      <div class="clearfix">
                            <select name="type" id="type" class="col-xs-12 col-sm-6">
                                  <option ${sysRes.type eq 1?'selected':''} value="1">菜单</option>
                                  <option ${sysRes.type eq 2?'selected':'' } value="2">功能</option>
                          </select>
                   	 </div>
                     <div class="clearfix form-actions" align="center">
 			<div class="col-md-offset-3 col-md-9">
			<button id="submit-btn" class="btn btn-info" type="submit" data-last="Finish">
			  	<i class="ace-icon fa fa-check bigger-110"></i>
			 	提交
			</button>
                        <button class="btn" type="reset">
                                <i class="ace-icon fa fa-undo bigger-110"></i>
                                重置
                        </button>
                      </div>
  		</div>
           </form>
请求： // 将 form 数据转换 json格式
         var postData=$("#validation-form").serializeJson();
         $.post("${context_path}/sys/res/saveRes" ,postData,function(data){
         	 if(data.code=='success'){
       		 layer.msg('操作成功', {
        	 icon: 1,
             	 time: 2000 //2秒关闭（如果不配置，默认是3秒）
        	 },function(){
        	 parent.reloadGrid();
         	 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
         	 parent.layer.close(index); //再执行关闭 
         });
补充：1. var data = $("#validation-form").serialize();
　         将表单内容序列化成一个字符串

     
      2.var jsonData = $("#validation-form").serializeArray();

　　   将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

　　   [{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name

json表单序列化