Ajax数据传递暨利用js进行表单数据回显

最新推荐文章于 2023-03-16 17:31:53 发布

原创最新推荐文章于 2023-03-16 17:31:53 发布 · 2.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js #ajax

经验之谈专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用Ajax进行数据交互，包括整个表单数据的传递、特定数据的传递以及利用JavaScript进行数据回显的方法。

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

问题一：Ajax传递整个表单数据：

function createCustomer() {
	$.post("${pageContext.request.contextPath}/list/add.do",
	$("#new_customer_form").serialize(),function(data){
	        if(data =="OK"){
	            alert("客户创建成功！");
	            window.location.reload();
	        }else{
	            alert("客户创建失败！");
	            window.location.reload();
	        }
	    });
	}

其中，new_customer_form为表单的ID，serialize()数据序列化，function(data)中的data即为后台返回在值；

问题二：Ajax传递某个数据：

function editCustomer(id) {
	    $.ajax({
	        type:"get",
	        url:"${pageContext.request.contextPath}/list/edit.do",
	        data:{"id":id},
	        success:function(data) {
	            $("#edit_cust_id").val(data.cust_id);
	            $("#cust_name").val(data.cust_name);
	            $("#edit_customerFrom").val(data.cust_source);
	            $("#edit_custIndustry").val(data.cust_industry);
	            $("#edit_custLevel").val(data.cust_level);
	            $("#edit_linkMan").val(data.cust_linkman);
	            $("#edit_phone").val(data.cust_phone);
	            $("#edit_mobile").val(data.cust_mobile);
	            $("#edit_zipcode").val(data.cust_zipcode);
	            $("#edit_address").val(data.cust_address);
	            
	        }
	    });
	}

其中的id即为传递的数据；

问题三：利用js进行数据回显，见上面的js代码，其中的 $("#edit_cust_id")即为单个输入的ID，val(data.cust_id);为要在该输入框中显示的内容信息。