php+JavaScript 实现前后端JSON交互(GET or POST)

php+JavaScript 实现前后端JSON交互(GET or POST)


DATA: 2018年05月21日 20:52:57

注:jsonp方式可解决跨域访问的问题,即:读者将前端代码copy至本地,可以发现笔者服务器提供的json接口依然是可用的。

有兴趣可到下面链接在开发者模式下体会交互过程。 http://www.yixzm.cn/public_api_view/json_server_html

前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
    <p>callback:</p><div id="divCallBackJson"></div>
    <p>post:</p><div id="divPostJson"></div>

    <script type="text/javascript">

function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCallBackJson').innerHTML = html;
}
//<!-- post 方式 -->
function postJson()
{
    var msgJson = '{"mainElements":["main_1","main_2"],"tipElements":["tip_1"],"subElements":["sub-1"]}';
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById('divPostJson').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","/public_api_json/post_json",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("msgJson="+msgJson);
    console.log(msgJson="+msgJson");
}

postJson();

</script>
<!-- jsonp 方式 -->
<script type="text/javascript" src="http://www.yixzm.cn/public_api_json/callback_json?jsoncallback=callbackFunction"></script>
</body>
</html>

后端代码

public function callback_json()
{
    header('Content-type: application/json');
    //获取回调函数名
    $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
    //json数据
    $json_data = '["jsondata1","jsondata2"]';
    //输出jsonp格式的数据
    echo $jsoncallback . "(" . $json_data . ")";
}

public function post_json()
{
    $json_data = NULL;

    if (isset($_POST['msgJson'])) {
        $json_data = $_POST['msgJson'];
    }
    echo $json_data;
}
版权声明

翼安博客


首发 翼安博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读
计算机基础算法篇(二)—— 对称加密算法
##对称加密算法   在对称加密算法中,数据发信方将明文(原始数据)和加密密钥一起经过特殊加密算法处理后,使其变成复杂的加密密文发送出去。收信方收到密文后,若想解读原文,则需要使用加密用过的密钥及相同算法的逆算法对密文进行解密,才能使其恢复成可读明文。在对称加密算法中,使用的密钥只有一个,发收信双方都使用这个密钥对数据进行加密和解密,这就要求解密方事先必须知道加密密钥。 ##常
26

网络安全基础篇(一)—— 常见名词解释1
##信息安全领域,渗透测试,漏扫,加固,逆向分别指什么 **渗透测试(Penetration Testing)**:渗透测试是一种针对计算机系统、网络或应用程序的安全评估方法。通过模拟攻击者的行为,渗透测试专家试图利用系统的漏洞或弱点来获取未经授权的访问权限,以评估系统的安全性,并提供改进建议。 **漏洞扫描(Vulnerability Scanning)**:漏洞扫描是通过自动化工具检测计算机
21

商务那些事(一)
##公共采购方式   公共采购一般包含以下几种方式: **公开招标**:这是最常用的一种采购方式,通过发布公告,邀请所有潜在的供应商参加竞争。招标人从应答人中择优选择中标(成交)供应商。这种方式的优势在于具有公开性和竞争性,可以降低采购成本,提高采购效率。 **邀请招标**:也称为有限竞争,这种方式不是对所有供应商开放,而是邀请少数特定的供应商参加竞争。这种方式的优点是节约
34

知识点学习Day5
1、公共采购方式(1) 公开招标:公开招标是最常见的招标方式,采购方在公共平台发布招标信息,符合条件的供应商都可以参与投标。公开招标的优点是投标人较多、竞争充分、不容易出现串标、围标等情况。 (2) 邀请招标:邀请招标是指采购人依法从符合相应资格条件的供应商中随机邀请3家以上供应商,并以投标邀请书的方式邀请其参加投标。这种方式是非公开性质的,通常适用于国家重点项目或国有资金占控
42

知识点学习Day4
C语言实现冒泡排序 1、升序排序: void asc(int *a,intn){    int i=0,j=0;    for( i=0;i<n-1;i++){        for(j=0;j<n-1;j++){     
41

计算机基础算法篇(一)—— 冒泡排序
##原理    对数组进行遍历,每次对相邻两个进行比较大小,若大的数值在前面则交换位置(升序),完成一趟遍历后数组中最大的数值到了数组的末尾位置,再对前面n-1个数值进行相同的遍历,一共完成n-1次遍历就实现了排序完成,时间复杂度是O(n^2),空间复杂度O(1)。 ##代码实现 ###C语言 ```C #include void bubble_sort(int arr[],
55

知识点学习Day3
1. 使用 C语言开发的软件,一般情况下要如何测试?C语言开发完成的软件,主要执行一下步骤完成测试:(1)需求分析:首先明确软件的需求和功能,确保测试团队对软件的功能和目标有清晰的理解。(2)制定测试计划:根据需求分析,制定详细的测试计划,包括测试的目标、范围、资源、时间表等。(3)创建测试环境:准备测试所需的硬件、软件和网络环境,确保测试环境与实际运行环境相似。(4)编写测试用例:根据
40

计算机基础软件测试篇(一)—— C语言开发软件
##什么是系统测试,C 语言的系统测试有哪些方法?    系统测试是软件开发过程中的一种测试方法,旨在验证整个软件系统的功能、性能和稳定性,以确保软件在实际环境中正常工作。    在C语言中,系统测试的方法可以有以下几种: 单元测试(Unit Testing):对程序中的每个函数或模块进行测试,确保其独立的功能正确实现。可以使用测试框架如Google T
41

计算机基础运维篇(一)—— Apache与Nginx
##Nginx 轻量级,采用 C 进行编写,同样的 web 服务,会占用更少的内存及资源; 抗并发,nginx 以 epoll and kqueue 作为开发模型,处理请求是异步非阻塞的,负载能力比;apache 高很多,而 apache 则是阻塞型的。在高并发下 nginx 能保持低资源低消耗高性能 ,而 apache 在 PHP 处理慢或者前端压力很大的情况下,很容易出现进程数飙升,从而拒绝服
39

知识点学习Day2
1、简述面向对象编程和面向过程编程,区别面向对象(OOP):以对象为核心的编程方式,程序的主体是对象,对象具有属性和方法的实体,通过对象之间进行操作完成交互,通过定义类,可以创建多个对象实例,它的基本特征有三:封装性、继承性和多态性。封装是指将对象的属性和方法封装在类中,外部不能直接访问,内部访问时,调用其方法类方法就可以,继承是可以从已有的类派生出新的类,并且可以获取父类的属性和方法,多态是指统
42

计算机基础前端篇(一)—— 常见的前端框架
## vue ### 特点   Vue 是一个以数据驱动视图的轻量级渐进式 MVVM 框架。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,所以其核心是一个响应的数据绑定系统。   **注**:*数据驱动视图: 常规的 js 都是操作 dom 来开发程序,代表者 jquery ,而Vue 不用直接操作 dom,是用数据来控制元素的变化。
45

作业1(0103)
一、列举你熟悉的三个前端框架,简述优缺点和特点。 答: Vue : Vue 是尤雨溪编写的一个构建数据驱动的 Web 界面的库,准确来说不是一个框架,它聚焦在 V ( view )视图层。
40