使用JQuery的post()方法向服务端（PHP、Java）进行请求

最新推荐文章于 2023-07-22 14:28:55 发布

Tim_Van

最新推荐文章于 2023-07-22 14:28:55 发布

阅读量2k

点赞数 1

分类专栏： Java 计协官网计协官网技术分享文章标签： AJAX JQuery

本文链接：https://blog.csdn.net/TimVan1596/article/details/83629601

版权

Java 同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

计协官网技术分享

8 篇文章 4 订阅

订阅专栏

计协官网

4 篇文章 0 订阅

订阅专栏

在进行Web编程时，我们常需要一个页面模板，然后动态从数据库中读入数据到页面中，填充页面内容，使页面在不刷新不改变URL的情况下改变内容。下面是我常用的一种的post请求数据的方法。

原理图

使用MVC架构

1、前端HTML可以视为View（视图），用于直接改变界面UI

2、JavaScript （JQuery）作为页面的Controller（控制器），作为连接前后端的桥梁

3、服务端（PHP/Java 、数据库）作为Model（模型），接收JQuery传来的数据，并返回Json数据给JQuery

实例

前端HTML - test.html

<body>
    <div>
        <form>
            用户名: <input type="text" name="name" id="usr-name"><br>
            密码: <input type="password" name="password" 
                       id="usr-password">
        </form>
    </div>


    <script>
        let name = $('#usr-name').val();
        let password = $('#usr-password').val();
        $.post('test/testjava.do',{
                    name : name,
                    password:password
            }
            , function (ret) {
                //解析ret
                ret = eval("(" + ret + ")");

                if (ret['error'] === 0) {
                    alert("处理成功！");
                }
                else {
                    alert("处理失败！");
                }

            });

    </script>

</body>

若使用Java作为后端语言（纯Servlet）- TestServlet.java

/**
 * 接收JQuery发送的数据，并返回Json
 * @author TimVan
 */
@WebServlet(name = "TestServlet",
        urlPatterns = {"/test/testjava.do"},
        loadOnStartup = 1)
public class TestServlet extends HttpServlet {

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        doPost(request, response);
    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("application/text; charset=utf-8");
        PrintWriter out = response.getWriter();

        //获得JQuery传入的数据
        String name =  request.getParameter("name");
        String password =  request.getParameter("password");

        //返回Json键值对 (使用HashMap)
        Map<String, Object> ret = new HashMap<>(1);
        //可以在这里使用JDBC连接数据库，获得数据
        if (true) {
            ret.put("error", 0);
        }
        else {
            ret.put("error", 1);
            ret.put("errorInfo", "处理出错");
        }

        //使用 Alibaba fastJson 序列化 ret
        String retJson = JSON.toJSONString(ret);
        out.write(retJson);
    }

}

若使用PHP作为后端语言 - testPHP.php

/**
 * 获得管理员登录用户自己的ID值
 * Created by PhpStorm.
 * User: 87702
 * Date: 2018/11/01
 */
session_start();
$name = '';
$isSuccess = 0;
//判断学号是否存在
if (!empty($_SESSION['name']) && $_SESSION['name'] != 0) {
    $isSuccess = 1;
    $name = $_SESSION['name'];
}

if ($isSuccess == 1){
    $result = array('error' => 0);
    $result['results'] = array(
        'data' => $name
    );
}
else{
    //有错误
    $result = array('error' => 1);
}


//将数据转为Json格式
$retaval = json_encode($result,JSON_UNESCAPED_UNICODE);

echo $retaval;

优缺点

-优点

1、不刷新页面的情况下，改变页面内容，提高用户体验

2、采用MVC架构，解耦各组件关联度，方便进行替换与代码复用（跨后端语言）。不破坏各语言自身的特性，使前后端分离，便于设计、开发、维护人员分工。

3、比起其他请求的数据方法，在防止CSRF（跨站请求伪造）攻击上更有优势

4、拥有post请求的全部优点

-劣势

1、和原生的PHP、JSTL直接页面修改相比，此方法速度相对较慢

2、由于不改变URL，页面内容动态生成，不利于分享页面和SEO（搜索引擎收录）

3、拥有post请求的全部缺点

Tim_Van

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery的post()方法向服务端（PHP、Java）进行请求

在进行Web编程时，我们常需要一个页面模板，然后动态从数据库中读入数据到页面中，填充页面内容，使页面在不刷新不改变URL的情况下改变内容。下面是我常用的一种的post请求数据的方法。原理图使用MVC架构1、前端HTML可以视为View（视图），用于直接改变界面UI2、JavaScript （JQuery）作为页面的Controller（控制器），作为连接前后端的桥梁...
复制链接

扫一扫