JAVA前后实现交互

写这个,就是闲着。     写这个,随便记录想到什么写什么哈。。。

接口一般指的是HTTP接口,也可以说是HTTP API。

接口由后端提供,前端调用后端接口以获取后端数据。

接口由URL和HTTP方法构成,URL为接口的地址,HTTP方法指的是GET, PUT, DELETE等等。

例如: 使用浏览器访问某个图片: https://fundebug.com/assets/images/logo/fundebug.jpg 实际上是给服务器发了一个GET请求。图片属于静态资源,使用GET方法可以自动获取。

ajax里的url以及HTTP方法一起构成了后端的接口。

图片地址以及GET方法一起构成了后端的接口。

Ajax的例子

 

      在上面的ajax请求中 url:添加的是由后台人员给的接口文件 一般是json格式的数据

网上用户上传图片作为头像 这个需求需要后台人员处理 
当用户登录 修改自己个人信息的时候 上传了头像
此时 后台处理该用户update个人信息 将该图片存入数据库 一般存的都是图片地址 string形式的数据
然后 要返回到前台的时候
后台人员需要对这些用户的个人信息进行处理 不只是头像 还有一些别的信息
后台通过语言编译 生成json格式的键值对(一般是json 还有xml txt 等数据格式)
生成一个地址也就是url,前台人员利用ajax
将返回的data显示到页面就好了

会返回一个image具体

 $(".imga").eq(i).css("background-image", "url(http://t1.loocha.cn:8080" + data.users[i].avatar + ")");

调用接口

     

ajax可以在页面引入jQuery后使用

 

 

这个是 java web 项目,你要ajax调用,必须要先知道你的java web 路由的一个配置情况,你这个应该是一个 spring mvc 项目,你试着打开api 目录,随便打开一个文件,然后找@RequestMapping,在它里面的字符串就是你要调用的接口 url


后台一般会提供接口URL和详细的接口文档,介时根据业务逻辑调用对应接口即可。

向后台索要借口API文档,里面肯定有详细的定义,胜过在这里自己猜测

自己搜一下这几个项目ppt_api,ppt-cms,ppt_web里面有没有"requestMapping"标示,这是定义API访问URL的常用方式

前端和后端是如何交互的

1、前端请求数据URL由谁来写

在开发中,URL主要是由后台来写好给前端。 
若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数(即URL请求的参数)。

2、接口文档主要由谁来写

接口文档主要由后台设计和修改。 
后台直接跟数据打交道,最清楚数据库里有什么数据,能返回什么数据。 
前端只是数据的被动接受者,只是接口文档的使用者。 
使用过程中,发现返回的数据部队,则跟后台商量,由后台修改。 
切记:前端不能随意更改接口文档,除非取得后台同意。

3、前端与后台交互的数据格式

主要是JSON,XML现在用的不多

4、前端与后台的交互原理

关注点:接口地址、前端请求的参数、后端返回的参数。 
调一下接口,看一下返回的数据。

5、前端请求参数的形式

GET和POST两种方式 
GET从指定的服务器中获取数据,POST提交数据给指定的服务器处理

6、前端应该告知后台那些有效信息,后台才能返回前端想要的数据

先将要展示的页面内容进行模块划分,将模块的内容提取出来,以及方便前端的一些标志值等,将所有想要的内容和逻辑告知后端 
后端从数据库里面去查询相应的数据表以获得相应的内容或者图片地址信息 
URL中的参数主要是根据后台需要,若后台需要一个参数作为查询的辅助条件,前端在URL数据请求时就传递参数

7、前端如何把页面信息有效传达给后台,以及后台如何获取到这些数据

所有前端请求的URL后面的参数都是辅助后台数据查询的 
若不需要参数,那后台就会直接给个URL给前端

8、前端应该如何回拒一些本不属于自己做的一些功能需求或任务

前端负责把数据展示在页面上 
清晰的认识自己需要做的需求和任务

9、当前端在调用数据接口时,发现有些数据不是我们想要的,那么前端应该怎么办

把请求的URL和返回的数据以及在页面的展示的情况给后台看【后台查询数据、取数据、封装数据方面等蛮难处理的】

10、为什么需要在请求的时候传入参数

后台在查询数据库的时候需要条件查询

后台的一个接口,AJAX传到数据库

//前端js操作:

function testAjax(){

var url="/testAjaxUrlJson/";//后台接收处理url

var txtContent= "textprm";//传输内容;

var objData = [

       { name: 'txtContent', value: txtContent}

   ];//post方式传送的数据

  $.ajax({

   url: url

    , data: objData

   , dataType: 'json'

      , type: 'POST'

        , success: function (data) {

            if (data.Result == 'success') {

             alert("操作成功");//请求传输成功回调函数

            }

            else 

            {

              alert("操作失败");//请求传输失败回调函数

             }

        }

        , error: function (msg) {

         alert(msg); //错误信息

    

        }

    });

}

 

//后台接收 MVC下

public JsonResult testAjax(Formcollection form)

{

    Hashtable ht = new Hashtable();

   string content=form["txtContent"] as string;

   //数据库操作

   //保存数据库中【数据操作,自己填充】

   //返回json

   bool result=false;

   if(数据库操作成功【result==true】)

        ht["Result"]="success";

else 

 ht["Result"]="failed";

return Json(ht);

}

猜你喜欢

转载自blog.csdn.net/wypersist/article/details/80555687
今日推荐