Ajax做用户资料修改页面

Ajax官方概念

jax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3]  使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

项目整合前言

Ajax在正式软件开发中是一定会使用的，随着Java框架的完善发展，jQuery使用Ajax在spring boot总整合使用已经变得非常简单。为了更好的将Ajax理解通透，我们可以直接上手代码，用一个简单的用户资料修改页面来学习Ajax的使用。

举例分析：当我们在正式软件中，如果需要从主页面跳转到修改页面，但是为了用户的体验性以及软件的实在性，大多软件在跳转到修改页面的时候，都会将当前用户的详细信息放在输入标签中

 

那么为什么刚开始跳转到修改页面就会显示用户的详细信息呢？其实这是依赖于Ajax做的异步请求信息，在跳转到该页面的时候，Ajax在页面加载前就做了异步请求，局部刷新，从后台数据库获取了用户的详细信息，并通过处理写入了文本标签中，代码如下：

$(document).ready(function (){
				$.ajax({
					url: "/users/get_by_uid",
					type: "GET",
					data: $("form-change-info").serialize(),
					dataType: "JSON",
					success:function (json){
						if (json.state == 200){
							$("#username").val(json.data.username);
							$("#phone").val(json.data.phone);
							$("#email").val(json.data.email);
							let radio = json.data.gender == 0 ? $("#gender-female") : $("#gender-male");
							//给元素的属性添加某个值
							radio.prop("checked", "checked");

						}
					},
					error:function (xhr){
						alert("获取用户信息失败！" + json.message);
					}
				});
			});

这是最经典的Ajax使用方法，利用json格式将数据从后端发送到前端。

 $(document).reday(funtion{

$.ajax（{

        url:"",

        ........

        }）

  });

这里的格式$(document).reday(funtion{}）指在也页面加载前执行函数，在函数中书写Ajax的异步请求，然后请求传到控制层最后依次请求数据操作获取数据返回给前端页面。

信息提交

当我们的信息修改完毕，点击提交之后页面也是执行Ajax的请求，因为返回的主页面不必重新加载数据，可以节省一部分的资源。

$("#btn-change-info").click(function (){
				$.ajax({
					url: "/users/change_info",
					type:"POST",
					data:$("#form-change-info").serialize(),
					dataType: "JSON",
					success:function (json){
						if (json.state==200){//这里的json.state==200不能写成json.state()==200
							alert("修改成功！");
							location.href = "index.html";
						}else {
							alert("修改失败!"+json.message);
						}
					},
					error:function (xhr){
						alert("您的登录信息已经过期，请重新登录！HTTP响应码：" + xhr.status);
						location.href = "login.html";
					}
				});
			});

提交之后，异步请求通过参数将修改后的信息返回给后端，控制层，然后依次调用服务层，数据层修改数据信息。