使用PHP通过AJAX获取到JSON文件的数据,点击按钮后添加url 跳转到指定页面

最新推荐文章于 2024-07-12 06:34:41 发布
最新推荐文章于 2024-07-12 06:34:41 发布
阅读量1.1k 收藏
点赞数
分类专栏： PHP jQuery的 AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Byte_Dance/article/details/80861382
版权
本文介绍如何在HTML页面中使用AJAX异步请求PHP，从JSON文件获取数据。当用户点击按钮时，利用获取的数据实现页面跳转到指定URL。
摘要由CSDN通过智能技术生成

html前端页面.通过AJAX异步获取内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JSON得到的页面</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<div class="container">
    <div class="row" id="wp">

    </div>
</div>

<script>
    function sp(){
        $.ajax({
            type: "GET",
            url: "file_ku.json",
            dataType: "json",
            success: function(html){
                for(var i=0;i<html["$heroArr"].length;i++){
                    $("#wp").append("<div class=\"col-sm-6 col-md-4\">\n" +
                        "            <div class=
最低0.47元/天 解锁文章
Byte_Dance
关注
专栏目录
解决ajax提交到后台数据成功但返回不走success而走的error问题
10-18
如果页面中有表单并且按钮触发了表单提交，那么会导致页面刷新或跳转，从而打断Ajax请求的异步执行流程，导致无法正确捕捉到返回的响应，而触发error回调。解决的办法是在表单中用一个普通按钮替代提交按钮，并使用...
php+ajax登录跳转登录实现思路
10-21
主要介绍了php+ajax登录跳转登录实现思路,非常的简单，有需要的小伙伴可以参考下
PHP中ajax返回xml数据,php+Ajax处理xml与json格式数据的方法示例
weixin_36071392的博客
03-10 152
本文实例讲述了php+Ajax处理xml与json格式数据的方法。分享给大家供大家参考，具体如下：一、ajax如何处理xml数据格式register.php只需修改上一篇《php+Ajax无刷新验证用户名操作》中chuli函数部分functionchuli(){// window.alert("cuhli函数被调用"+myXmlHttpRequest.readyState);//我要取出从regi...
探讨PHP页面跳转的实现技巧
最新发布
2401_85975385的博客
07-12 676
在实际开发中，我们可以根据具体需求选择合适的跳转技巧，并结合其他Web开发技术来实现更加优秀的用户体验和交互效果。建此基础上我可以证明，JavaScript还支持丰富的动画效果和交互体验，可以提升用户的跳转体验。使用HTML元标签进行页面跳转的优点在于无需编写PHP代码，可以直接在HTML文档中设置。因此，在使用JavaScript进行页面跳转时，我们需要充分考虑这些因素，并采取相应的措施来确保跳转的稳定性和可靠性。函数仍然是实现页面跳转的首选方法，尤其是在需要进行服务器端逻辑处理后再进行跳转的场景中。
项目组给了我一个接口直接访问是json的数据，我怎么在得到接口中的json数据在页面显示啊！
编程人生
07-30 5216
为了帮助网友解决“项目组给了我一个接口直接访问是json的”相关的问题，中国学网通过互联网对“项目组给了我一个接口直接访问是json的”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:项目组给了我一个接口直接访问是json的数据，我怎么在得到接口中的json数据在页面显示啊！，具体解决方案如下： 解决方案1： javascript 解析写到页面上 java的话 把字符串转成
html php js ajax请求urlencode,ajax get post urlEncode url跟body
weixin_39941620的博客
06-16 182
$("#ajaxPostZh").click(function() {var merchantVal = {id : 1234567,name : "喵喵",alias:":喵喵%",content:encodeURIComponent("aa%cc哈哈bbb")};$.qAjax({url : "http://enterprise.qbao.com/mechant/enterprise/regi...
php中ajax用法,详细为你解析AJAX的使用方法(代码贴上)
weixin_34005314的博客
03-11 485
下面是我给大家整理的AJAX的使用方法，有兴趣的同学可以去看看。HTTPS"/jsontest/randomdata/" // there was a missing trailing/// i.e.// was going to https://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.960417911050...
利用ajax提交form表单到数据库详解(无刷新)
12-12
这个PHP脚本从`$_POST`数组中获取`title`和`url`值，然后连接到本地的MySQL数据库（使用root账号），选择数据库`test`，并将数据插入到`testdata`表中。 为了使这个例子能正常工作，你需要确保有一个名为`test`的...
ajax实现无刷新上传文件功能
12-03
在事件处理函数中，我们首先获取到文件输入框的文件对象，并使用`FormData`构造要上传的数据。`FormData`对象允许我们将文件与其他数据一起发送到服务器： ```javascript var oFormData = new FormData(); ...
ajax请求中contentType与dataType区别
weixin_30886233的博客
02-06 164
contentType: 告诉服务器，我要发什么类型的数据，默认值:"application/x-www-form-urlencoded"。 dataType：告诉服务器，我要想什么类型的数据。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这...
php 接收 ajax get请求,Laravel 接受Ajax的GET请求
weixin_39962394的博客
03-29 248
Laravel 框架接收Ajax的GET请求很简单,但是有弯路。不过 : 这个文章不是初学者看的,至少你们要会创建html界面,创建JS,引用JS库,实现$.Ajax代码,才行..............不过,我相信,应该都会。首先,Laravel框架接收Ajax的Url都是在Routes里面的web.php里设定的，但是,Laravel 接收Url的入口文件就一个,那就是index.php.什么...
php下的原生ajax请求
YUSIR 完美CODING世界
09-20 1310
浏览器中为我们提供了一个JS对象XMLHttpRequet，它可以帮助我们发送HTTP请求，并接受服务端的响应。 意味着我们的浏览器不提交，通过JS就可以请求服务器。   ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。   1、创建XHR对象 1 var xhr
Vue——获取后端json数据中的URL并通过按钮跳转到此URL
WU2629409421perfect的博客
02-05 2341
目录获取的json数据vue & axios 处理后端返回数据index.vue运行界面点击 `点击 jump_to_new_tab` 按钮点击首页中的 `点击`点击 `点击 jump_to_self` 按钮注意 获取的json数据 {“status”:"success","data":"https://www.baidu.com/"} vue & axios 处理后端返回数据 index.vue <template> <div class="container"&g
ajax页面跳转（后台返回的是一个url地址，或者自己传进去的是url地址）
weixin_33889245的博客
11-27 4758
1 function modifyMerchantInfo(merchant_code) 2 { 3 $.ajax({ 4 url: '/intra/crm/merchant/OrderMgr.htm?method=checkMerchantBasicInfoToModify', 5 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值