前后端进行交互的方式

1、在前端页面中编写发送请求的方法,点击事件来完成。选中对应的按钮($(“选择器”)),再去添加点击的事件,$.ajax()函数发送异步请求。

 

2、JQUery封装了一个函数,称之为$.ajax()函数,意即通过对象调用ajax()函数,可以异步加载相关的请求。依靠的是JavaScript提供的一个对象XHR(XmlHttpResponse),封装了这个对象。

 

3、ajax()使用方式。需要传递一个方法体作为方法的参数来使用,一对大括号称之为方法体。ajax接收多个参数,参数之间使用“,”进行分隔,每一组参数之间使用“:”进行分隔,参数的组成部分一个是参数的名称(不能随意定义,只能使用ajax封装好的参数),,另一个是参数的值,参数的值要求是用字符串来表示。语法结构如下:

$.ajax({

     url:"",

     type:"",

     data:"",

     dataType:"",

     success:function(){

     },

     error:function(){

     },

});

 

4、ajax()函数参数的含义:

参数 功能描述
url 标识请求的地址(url地址),不能包含参数列表部分的内容。例如:url:“localhost:8080/users/reg”
type 请求类型(GET和POST请求的类型)。例如:type:"POST"
data 向指定的请求url地址提交的数据。例如:data:"username=tom&pwd=123"
dataType 提交的数据的类型。数据的类型一般指定为json类型。dataType:"json"
success 当服务器正常响应客户端时,会自动调用success参数的方法,并且将服务器返回的数据以参数的形式传递给这个方法的参数上。
error 当服务器未正常响应客户端时,会自动调用error参数的方法,并且将服务器返回的数据以参数的形式传递给这个方法的参数上。

 

5、js代码可以独立声明在一个js的文件中或声明在一个script标签中。

 

6、js代码无法正常被服务器解析执行,体现在点击页面中的按钮没有任何响应。解决方案:

(1)在项目的maven下clear清理项目,然后再install重新部署;

(2)在项目的file选项下-cash清理缓存;

(3)重新构建项目:build选项下-rebuild选项;

(4)重启idea;

(5)重启电脑。

posted @ 2022-12-09 17:52  Linqylin  阅读(284)  评论(0编辑  收藏  举报