JavaWeb全栈开发前后端交互通用标准(下)

简介: JavaWeb全栈开发前后端交互通用标准(下)

jQuery and AJAX is FUN!!!

This is some text in a paragraph.

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。 回调函数可以设置不同的参数: - responseTxt : 包含调用成功时的结果内容 - statusTXT : 包含调用的状态 - xhr : 包含 XMLHttpRequest 对象

例子:在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:

jQuery 代码:

$("button").click(function(){
    $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success")
        alert("外部内容加载成功!");
        if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
});

AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

GET:从指定的资源请求数据

POST:向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

jQuery $.get() 方法

$.get()

通过 HTTP GET 请求从服务器上请求数据。

语法:

$.get(url,[data],[callback],[type]);

必需的 URL 参数规定希望请求的 URL。

可选的 data 参数是请求时所传递的参数,可以json对象也可以是字符串拼接形式。

可选的 callback 参数是请求成功后所执行的函数名。

可选的 type 参数是期待的返回值类型,可以是text/xml/json。

例子:使用 $.get() 方法从服务器上的一个文件中取回数据:

/*
$.get() 的第一个参数是我们希望请求的 URL("demo_test.asp")。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容data,第二个回调参数存有请求的状态status。
*/
$(document).ready(function(){
    $("button").click(function(){
        $.get("/example/jquery/demo_test.asp",function(data,status){
            alert("数据:" + data + "\n状态:" + status);
        });
    });
});

jQuery $.post()

. p o s t ( ) 方 法 通 过 H T T P P O S T 请 求 从 服 务 器 上 请 求 数 据 。 语 法 :.post(url,[data],[callback],[type]);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

可选的 type 参数是期待的返回值类型,可以是text/xml/json。

例子:使用 $.post() 连同请求一起发送数据:

/*
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。
然后我们连同请求(name 和 city)一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数,对它们进行处理,然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
*/
$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name:"Donald Duck",
        city:"Duckburg"
    },
    function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

$.post() 和 $.get() 的完整形式

$.post() 和 $.get() 是简写的 Ajax 函数,等价于:

$.ajax({
    url: url,
    type: "get"/"post",
    data: data,
    dataType: callback
    success: success,
});

根据响应的不同的 MIME 类型,传递给 success 回调函数的返回数据也有所不同,这些数据可以是 XML root 元素、文本字符串、JavaScript 文件或者 JSON 对象,也可向 success 回调函数传递响应的文本状态,取决于dataType的类型。


实现get方式跨域请求数据:

<script>
$(document).ready(function(){
    $.ajax({
        url: "http://www.xxx.cn/index.php",
        type: "get",
        dataType: "jsonp", //指定服务器返回的数据类型
        success: function (data) {
            console.log(data);
        }
    });
});
</script>

实现post方式跨域请求:

<script>
$(document).ready(function(){
    $.ajax({
        url: "http://www.xxx.cn/index.php",
        type: "post",
        dataType: "json", //指定服务器返回的数据类型
        success: function (data) {
            console.log(data);
        }
    });
});
</script>

服务器端:

Access-Control-Allow-Origin: * 表示允许任何域名跨域访问。

如果需要指定某域名才允许跨域访问,只需把

Access-Control-Allow-Origin: * 改为 Access-Control-Allow-Origin: 允许的域名。

某些header请求头:

// 指定允许其他域名访问
header('Access-Control-Allow-Origin: *');
// 响应类型
header('Access-Control-Allow-Methods: POST');
// 响应头设置
header('Access-Control-Allow-Headers: x-requested-with, content-type');
//设置内容类型为json
header('content-type: application:json; charset = utf8');
目录
相关文章
|
1月前
|
安全 前端开发 Java
《深入理解Spring》:现代Java开发的核心框架
Spring自2003年诞生以来,已成为Java企业级开发的基石,凭借IoC、AOP、声明式编程等核心特性,极大简化了开发复杂度。本系列将深入解析Spring框架核心原理及Spring Boot、Cloud、Security等生态组件,助力开发者构建高效、可扩展的应用体系。(238字)
|
2月前
|
JavaScript Java 大数据
基于JavaWeb的销售管理系统设计系统
本系统基于Java、MySQL、Spring Boot与Vue.js技术,构建高效、可扩展的销售管理平台,实现客户、订单、数据可视化等全流程自动化管理,提升企业运营效率与决策能力。
|
2月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
2月前
|
存储 Java 关系型数据库
Java 项目实战基于面向对象思想的汽车租赁系统开发实例 汽车租赁系统 Java 面向对象项目实战
本文介绍基于Java面向对象编程的汽车租赁系统技术方案与应用实例,涵盖系统功能需求分析、类设计、数据库设计及具体代码实现,帮助开发者掌握Java在实际项目中的应用。
116 0
|
3月前
|
Java 数据库连接 微服务
零基础自学 Java 全栈必备最全学习路线及知识清单方向指引
本文为零基础学习者提供完整的Java全栈学习路线,涵盖Java基础、进阶、框架、项目实战及拓展方向,助你系统掌握全栈开发技能,快速成长为优秀Java工程师。
510 6
|
3月前
|
前端开发 Java API
2025 年 Java 全栈从环境搭建到项目上线实操全流程指南:Java 全栈最新实操指南(2025 版)
本指南涵盖2025年Java全栈开发核心技术,从JDK 21环境搭建、Spring Boot 3.3实战、React前端集成到Docker容器化部署,结合最新特性与实操流程,助力构建高效企业级应用。
1205 1
|
3月前
|
安全 Java 数据库
Java 项目实战病人挂号系统网站设计开发步骤及核心功能实现指南
本文介绍了基于Java的病人挂号系统网站的技术方案与应用实例,涵盖SSM与Spring Boot框架选型、数据库设计、功能模块划分及安全机制实现。系统支持患者在线注册、登录、挂号与预约,管理员可进行医院信息与排班管理。通过实际案例展示系统开发流程与核心代码实现,为Java Web医疗项目开发提供参考。
206 2
|
3月前
|
JavaScript 安全 前端开发
Java开发:最新技术驱动的病人挂号系统实操指南与全流程操作技巧汇总
本文介绍基于Spring Boot 3.x、Vue 3等最新技术构建现代化病人挂号系统,涵盖技术选型、核心功能实现与部署方案,助力开发者快速搭建高效、安全的医疗挂号平台。
225 3
|
3月前
|
移动开发 Cloud Native 安全
Java:跨平台之魂,企业级开发的磐石
Java:跨平台之魂,企业级开发的磐石