Javascript URL参数获取与调用后台API

最新推荐文章于 2023-08-31 10:39:30 发布
最新推荐文章于 2023-08-31 10:39:30 发布
阅读量2.2k 收藏
点赞数
分类专栏： 网络管理 文章标签： url javascript xmlhttprequest null iterator function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chennxi/article/details/7452572
版权 

第一个页面：index.html

<html>
    <body>
	<h2>Test</h2>
        <hr />
	<a href = "/lectureEx.html?rank=00&provider=open163" target = "_blank">Page00</a>
	<a href = "/lectureEx.html?rank=01&provider=open163" target = "_blank">Page01</a>
    </body>
</html>

第二个页面：lectureEx.html 

<html>
    <head>
	    <script>
		function showItem()
		{
		    var url = window.location.href;
			var paramStr = url.substring(url.indexOf("?") + 1);
			var params = paramStr.split("&");
			var rank, provider;
			for (i = 0; i < params.length; i++)
			{
			    var p = params[i].split("=");
				if (p[0] == "rank")
				{
				    rank = p[1];
				}
				else if (p[0] == "provider")
				{
				    provider = p[1];
				}
			}
			
			var xmlhttp;
			if (window.XMLHttpRequest)
			{
				xmlhttp = new XMLHttpRequest();
			}
			else
			{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			
			xmlhttp.onreadystatechange = function()
			{
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
				{
					var xmlDoc = xmlhttp.responseXML;
					var title = xmlDoc.getElementsByTagName("Title_Original")[0].childNodes[0].nodeValue;
					document.getElementById("title").innerHTML = title;
					
					var movies = xmlDoc.evaluate("//Movie", xmlDoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
					var m = movies.iterateNext();
					var links = "";
					while (m)
					{
					    var subtitle = m.getElementsByTagName("fileName")[0].childNodes[0].nodeValue;
						var link = m.getElementsByTagName("locationUri")[0].childNodes[0].nodeValue;
					    links = links + "<a href=\"" + link + "\">" + subtitle + "</a>" + "<br />";
						m = movies.iterateNext();
					}
					document.getElementById("links").innerHTML = links;
					
					var thumbxml = xmlDoc.evaluate("//Thumbnail/locationUri", xmlDoc, null, XPathResult.STRING_TYPE, null);
					document.getElementById("thumbnail").setAttribute("src", thumbxml.stringValue);
					
					var summary = xmlDoc.getElementsByTagName("Summary_Short")[0].childNodes[0].nodeValue;
					document.getElementById("desc").innerHTML = summary;
				}
			}
			
			var urltemp = "/crawlerServer/topvideo/single?rank={rank}&datatype=xml&provider={provider}";
			var url = urltemp.replace("{rank}", rank).replace("{provider}", provider);
			xmlhttp.open("GET", url, true);
			xmlhttp.send();
		}
		</script>
    </head>
    <body onload = "showItem()">
	    <div id = "show">
		    <h2 align = "center" id = "title"></h2>
			<img src = "" id = "thumbnail"></img>
			<p id = "desc"></p>
			<p id = "links"></p>
		</div>
    </body>
</html>


chennxi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 cavas画布加载图片
大道相通
03-06 1万+
HTML5 cavas画布加载图片 Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="/img/flower.p
KORONA.pos-Client-API
03-18
KORONA.pos客户端API POS是完全基于Web的API。 POS应用程序将在内部Web浏览器中打开外部应用程序。外部Web应用程序可以选择检索和修改当前交易。 设置 登录到您的KORONA.pos Cloud后台 转到设置>外部系统调用（如果您没有此导航点，请选择“编辑菜单条目”） 使用指向您网站的显示URL创建一个新的外部系统调用 转到设置>按钮布局并创建一个新按钮，然后将您的外部系统调用添加到该按钮。 单击该按钮后，POS将打开您的应用程序。
后端数据配置相对路径，前端添加网站根 URL （根路径）- js获取网站项目根路径- 获取根路径后的第一个斜杠前 / 的项目- - 判断url包含某字符串
最新发布
Muxiu
08-31 1619
js获取项目根路径，如下：原。
Vue 页面和js文件中直接利用接口url请求后台：this.$http.post、axios.post、Vue.http.post
qq_27312237的博客
12-31 7330
vue http.post,axios.post
前端js调用后端API获取数据的三种方法（2022.7.25）
热门推荐
I have a dream, here my dreams come true!
07-25 4万+
js调用后台API进行http请求的三种方法（get-post)
本地存储（1）获取页面URL地址并判断URL是否包含具体值；，sessionstorage，localStorage清除removeItem
Sunny_lxm的博客
06-06 2911
本文介绍jquery/js获取当前页面url地址的方法，在jquery与js中获取当前页面url方法是一样的， 因为jquery没有自己相关的函数，使用js 的windows方法来获取， 相关方法如下： window.location.pathname　//设置或获取对象指定的文件名或路径 window.location.href　//设置或获取整个 URL 为字符串 window.locati...
js操作url
QWERTY55555的专栏
12-09 1404
js
vue如何从url获取参数并调用接口
weixin_44225042的博客
06-15 1775
需要前端人员从url获取用户所填写的url参数，并且利用参数调取后端接口并返回给用户所需要的信息。比如图片中的？后面的spm参数。 第一：路由地址中不用填写与参数有关的信息。 第二：直接在/weather的url地址后输入需要的参数。 第三：在mounted中获取直接利用this.$route.query获取url参数。 打印效果如下： 第四:在接口处直接利用获取的参数调用接口。...
javascript获取url信息的常见方法
_江屿_
01-01 5457
javascript获取url信息的常见方法
JavaScript使用URL用来解析处理URL
ModStartCMS的博客
02-02 629
这个值通常是一个完整的URL，指向当前文档的位置。在使用 URL 类的构造函数中，第二个参数叫做 base，它是一个可选的字符串或URL对象，表示第一个参数 (URL字符串) 的基础 URL。这个属性可以用来获取当前文档的URL，例如在页面中的相对路径或者构建网页上的资源的完整URL，或者用来验证文档的位置是否正确。当第一个参数是一个相对路径时，第二个参数将作为该相对路径的基础路径，这个在处理页面URL时非常有用。这个例子中，先用get获取查询字符串中的某个值，然后使用append来添加一个新的参数。
使用dynatrace-ajax跟踪JavaScript的性能
12-03
一旦您下载 并安装了DAE (dynaTrace Ajax Edition), 您必须进入开始菜单里面的程序组，找到dynaTrace。很明显，首先要做的是录入一个url链接，接下来，点击播放...通过检测事件触发和JavaScript API调用，时间线被分割
api-endpoint:一个使用Node和Express构建后端API的项目
04-09
api端点该应用程序是一个使用Node和Express构建后端API的... 当前端需要与后端进行事务时，它将使用类似于html url的api端点进行调用。 然后，如果需要，api会响应成功或失败的数据。 Api端点已通过POSTMAN进行了测试。
node-pinboard:Pinboard API的Node.js包装器
05-02
在后台，node-pinboard使用node-fetch，因此API调用错误将遵循该库的模式。 测验 npm test 要确定代码覆盖率： npm run coverage 例子 const Pinboard = require ( 'node-pinboard' ) . default ; const api_token ...
财付通api接口
08-17
从响应对象中获取参数值，进行相应处理，例如 PayResponse.getParameter(参数名) 调用过程 支付类 支付跳转 ·业务功能 买家在财付通 APP 中下订单后付款，财付通 APP 调用财付通开放平台支付接口生成支付 URL， ...
如何让路由器外部的电脑能访问路由器内部的WEB服务器[TP-LINK]
大道相通
02-12 6328
1. 打开 TP-LINK 菜单的“转发规则”==》“虚拟服务器”； 2. 添加新条目：添加新条目，指定内部机器的IP地址和服务端口。
tomcat web 工程下配置文件读取的问题
大道相通
03-05 3415
本想用 getClass().getClassLoader().getResource(configPath); 和 file.lastModified() 的方式动态判断文件更新时间来决定是否重新加载配置文件，但更新了webapps下的配置文件后，文件修改时间总是不变。 后来想想才知道，其实webapps下所有的文件在tomcat启动的时候都被发布到temp目录中了，程序读取的也实际上是tem
Maven pom.xml 指定第三方库
大道相通
03-19 2419
测试lily-client，发现从默认的M2库上下载不到lily的jar包，需要手动指定lilyproject远程仓库的url lilyproject Lily Maven repository http://lilyproject.org/maven/maven2/deploy/
html 调用后台post请求
05-19
可以使用 JavaScript 来向后台发送 POST 请求。 以下是一个示例： ```html <!DOCTYPE html> <html> <head> <title>POST 请求示例</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form id="myForm"> <label for="username">用户名：</label> <input type="text" name="username" id="username"><br> <label for="password">密码：</label> <input type="password" name="password" id="password"><br> <button type="button" onclick="submitForm()">提交</button> </form> <script> function submitForm() { var formData = new FormData(document.getElementById("myForm")); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://example.com/api/login", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = xhr.responseText; alert(response); } }; xhr.send(formData); } </script> </body> </html> ``` 在上面的示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了一个提交按钮。当用户点击提交按钮时，`submitForm` 函数将被调用。 `submitForm` 函数首先使用 `FormData` 对象来收集表单数据，然后创建一个 `XMLHttpRequest` 对象并调用它的 `open` 方法来指定请求的类型、URL 和是否异步。接下来，我们设置 `onreadystatechange` 事件处理程序来监听请求状态的变化。当请求完成并成功返回时，我们从 `responseText` 属性获取响应数据，并弹出一个消息框来显示它。 最后，我们调用 `send` 方法来发送包含表单数据的 POST 请求。在这个例子中，我们将请求发送到 `http://example.com/api/login`，你需要将这个 URL 替换为你自己的后台接口地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值