前端和后台对接案例

比眉伴天荒 2023-07-04 12:47 42阅读 0赞

**前端访问后端接口通过后端提供的的URL**

<!DOCTYPE html>
    <html>
    <head>
    <title>login.html</title>
    <meta charset="utf-8">
    </head>
    
    <！-- 待补充的javaScript Ajax请求代码 在下面 --！>
    
    <body>
        <form action="#">
            username:<input type="text" name="username"><br>
            password:<input type="password" name="password"><br>
            <input type="button" value="submit" id="submit">
        </form>
    </body>
    </html>

2、Ajax请求代码  
这里使用了jquery-1.8.3.js库，顺便回顾下函数的书写格式  
格式：jQuery.ajax(\[settings\])

*  参数settings：设置所有的参数,JSON对象
 *  data:请求参数
 *  type:请求方式 (“POST” 或 “GET”)，
 *  success:成功的回调函数，function(data, \[textStatus\], \[jqXHR\])
 *  error:请求失败时调用函数
 *  dataType:预期服务器返回的数据类型

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#submit").click(function(){
            var url = "/myblog/servlet/loginServlet";
            var params = {"username":$("input[type='text']").val(), "password":$("input[type='password']").val()};
    
            $.ajax({
                    "url" : url,
                    "data" : params,
                    "type" : "post",
                    "success" : function(data) {
                        // 参数为json类型的对象
                        alert(data.message)
                    },
                    "error" : function() {
                        alert("用户名或者密码错误");
                    }
                });
    
            });
        });
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关极光推送REST API与Java后台对接

极光推送官网的web推送页面 ![在这里插入图片描述][43374ba4b5034bfe80385fa744819de2.png] 因为是对接它的api，所以我参照这这

女爷i/ 2023年10月04日 20:28/ 0 赞/ 54 阅读

相关后台系统前端服务器

简介针对前后端分离的需求，构建了以React以及相关开发脚手架开发的前端系统，负责与后端的商品秒杀控制和管理者权限系统服务器。如何使用 `项目准备` 由

灰太狼/ 2023年09月27日 09:23/ 0 赞/ 115 阅读

相关前端和后台对接案例

前端访问后端接口通过后端提供的的URL <!DOCTYPE html> <html> <head> <title>login.html</ti

比眉伴天荒/ 2023年07月04日 12:47/ 0 赞/ 43 阅读

相关 Hive和Hbase的对接

文章目录一、配置hive 二、hive中数据与hbase相关联三、hbase中数据与hive相关联一、配置hive 1、创建hive

Love The Way You Lie/ 2023年01月13日 14:53/ 0 赞/ 199 阅读

相关 JMeter和Maven对接

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3

一时失言乱红尘/ 2022年10月26日 12:56/ 0 赞/ 63 阅读

相关 web前端实现与原生开发对接（ios android）

最近的项目需要与原生配合开发，今天整理出来这里使用了一个封装的方法，简单好用 > 1、将封装好的方法在页面上引用 import bridge from "..

清疚/ 2022年09月09日 09:55/ 0 赞/ 206 阅读

相关前端和java后台将HTML转换成pdf

前端和java后台将HTML转换成pdf java后台方式： public class HtmlToPdf { private

矫情吗；*/ 2022年04月12日 11:41/ 0 赞/ 425 阅读

相关前端后台模板管理

[https://segmentfault.com/a/1190000015835976?utm\_source=tag-newest][https_segmentfault.

短命女/ 2022年04月01日 06:00/ 0 赞/ 455 阅读

相关与前端(使用vue框架)对接的问题

1.跨域问题跨域问题是：浏览器的同源安全策略没错，就是这家伙干的，浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。那怎么才算跨域呢？ 1. 请求协

柔光的暖阳◎/ 2022年01月06日 01:03/ 0 赞/ 142 阅读

相关 mongo 数据库和后台结合案例

目录结构(忽略test测试文件): ![在这里插入图片描述][20200610104849229.png] 在models.js中暴露和各个数据库匹配的model:

向右看齐/ 2021年07月24日 23:34/ 0 赞/ 475 阅读