AndServer 里引用静态页面,ajax做通讯

项目:地址

API:地址

1.新建一个Controller类

/**
 * 通用接口
 */
@RestController
@RequestMapping(path = "/comm")
public class CommController {

    /*  支持GET、POST请求*/
    @RequestMapping(path = "/login1", method = {RequestMethod.POST, RequestMethod.GET}, produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    void login1(HttpResponse response, @RequestParam(name = "username") String username, @RequestParam(name = "password") String password) {
        String json = "{\"username\":\"" + username + "\",\"password\":\"" + password + "\"}";
        ResponseBody body = new JsonBody(json);
        response.setBody(body);
    }

    /*  支持GET、POST请求*/
    @RequestMapping(path = "/login", method = {RequestMethod.POST}, produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    String login(HttpResponse response, @RequestParam(name = "username") String username, @RequestParam(name = "password") String password) {
        String json = "{\"username\":\"" + username + "\",\"password\":\"" + password + "\"}";

        JSONObject jsonObject = (JSONObject) JSONObject.toJSON(new LoginInfo(username, password));
        return jsonObject.toJSONString();
    }
}

这里可以通过输入网址测试一下,这里面有2个方法,刚开始也不明白,就是测试一下Ajax里面获取参数的时候不一样,这两个方法一个是有返回值,一个是没有的:

http://192.168.0.128:8080/comm/login1?username=123&password=321

这里返回:

{
    "username": "123",
    "password": "321"
}

http://192.168.0.128:8080/comm/login?username=123&password=321

{
    "data": "{\"password\":\"321\",\"username\":\"123\"}",
    "errorCode": 200,
    "isSuccess": true
}

看一下js的代码:

$(function(){

})
function onSubmit(){
    var username = $("#username").val();
    var password = $("#password").val();
   $.ajax({
                  //请求方式
                  type : "POST",
                  //请求地址
                  url : "comm/login",
                  dataType:"json",
                  //数据,json字符串
                  data : {
                    "username":username,
                    "password":password
                  },
                  //请求成功
                  success : function(data) {
                  //将字符串装为json
                  var dataObj = eval('('+data.data+')');
                  alert(dataObj.username);
                  },
                  //请求失败,包含具体的错误信息
                  error : function(e){
                      console.log(e.status);
                      console.log(e.responseText);
                  }
  });
}

HTML可以随便写2个输入框

alert  可以得到我们想要的值。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的例子: HTML页面中,可以使用jQuery库的ajax方法发送请求并接收后端数据,示例代码如下: ```html <!DOCTYPE html> <html> <head> <title>AJAX Example</title> <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="result"></div> <script> $.ajax({ url: "/api/data", // 后端接口地址 method: "GET", // 请求方法 success: function(data) { // 成功回调函数 $("#result").html(data); // 显示后端返回的数据 }, error: function() { // 失败回调函数 alert("请求数据失败!"); } }); </script> </body> </html> ``` 这使用了jQuery库中的ajax方法,通过设置url、method、success和error参数来发送请求、处理响应和处理异常。其中,url表示后端接口地址,method表示请求方法(GET、POST、PUT等),success和error分别表示请求成功和失败时的回调函数。在success回调函数中,我们将后端返回的数据显示在页面上,这使用了jQuery库的html方法。 后端接口可以根据具体需求来设计,这以Python Flask框架为例,示例代码如下: ```python from flask import Flask app = Flask(__name__) @app.route('/api/data') def get_data(): data = "Hello, World!" return data if __name__ == '__main__': app.run() ``` 这定义了一个路由/api/data,当接收到GET请求时,返回字符串"Hello, World!"。当然,实际应用中,我们可以从数据库中查询数据等,然后将结果返回给前端页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值