JavaScript简易封装，可以不用去ajax，直接用标签，任何标签发送请求

最新推荐文章于 2022-04-19 13:42:05 发布
最新推荐文章于 2022-04-19 13:42:05 发布
阅读量1.1k 收藏
点赞数 3
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohu12685/article/details/81204231
版权

封装了一个特别简单的好玩的小插件，引入xiaohu.js就可以使用了，用任意一个节点，就可以实现ajax请求

可以是一个<p></p>标签，也可以是一个<div></div>

还可以绑定事件，可以是 click/mouseover

#id 节点id 必填
#type 请求方式 必填
#url 请求路径 必填
#behavior 是否使用事件触发 目前有 click/mouseover
#towid 事件绑定ID
王海虎
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
不用ajax也可以达到不刷新页面
08-10
<body style="text-align:center"> <!-- 定义提交的表单，及其包含的UI元素 --> <form action="submit.html" method="post" target="myframe"> <h2>请输入用户名和密码：</h2> <p> <!-- 用户名的输入框 --> 用户名：<input type="text" name="username" value="" id="username"/> </p> <p> <!-- 密码的输入框 --> 密码：<input type="passowrd" name="password" value="" id="pwd"/> </p> <p> <!-- 登录按钮，由login函数来做处理 --> <input type="submit" value="登录"/> </p> <p id="msg"></p> </form> <iframe src="" style="display:none;" name="myframe" id="myframe"></iframe> </body>
不使用Ajax时的请求
你今天真好看呀
11-13 1351
传统请求： 在用户点击浏览器上的超链接的时候，发送了传统的请求，这次请求的发送，浏览器会将当前页面内容全部清除，迎接一个新的页面。 web-xml配置文件： <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="...
不用ajax post,通过自己写的方法实现不用ajax的POST方法请求（在网上看到的，感觉很实用）...
weixin_29938009的博客
08-05 481
function post(URL,PARAMS) {var temp = document.createElement("form");temp.action = URL;temp.method = "post";temp.style.display = "none";for (var x in PARAMS) {var opt = document.createElement("textare...
前后台数据交互方式-非Ajax方式和Ajax方式
ye_yeye_ye的博客
04-19 1171
非Ajax方式 方式 没有使用Ajax对象发送的请求，都是非Ajax的。 常用的的非Ajax请求的方式有： from表单提交数据。 超链接发送请求。 window.localtion.href。 特点 浏览器发起的非Ajax请求，在后台处理完成后，浏览器再接收到此次请求的响应结果后，会覆盖当前页面，只显示新的相应结果。 注意 因为非Ajax请求的相应结果，被浏览器接收后会直接覆盖原有内容只显示新的，所以在后台处理完非Ajax请求处理，必须将处理结构和页面代码拼接好相应给浏览器 （请求转发/重定向/EL表
通过自己写的方法实现不用ajax的POST方法请求（在网上看到的，感觉很实用）
眼前一座山，踏平它
03-31 3899
今天我在开发的时候遇到一个请求参数中文乱码问题，不论我怎么编码，解码都不行，后来我试着用AJAX的POST方式来发请求，结果乱码正常了，说明这个乱码跟请求方式有关。好像本来就是这样的，后台在处理请求参数的时候，只能对post方式的参数进行编码解码。但是，我这里又不能用异步请求方式，这该怎么么办呢。就试想出了ajax还有没有什么办法可以发post请求，最后再网上找到一个解决办法，感觉还不错。
Ajax.js:封装了Ajax操作的简易工具
06-27
封装了Ajax操作的简易工具 这里采用单例模式封装成一个对象，即只有一个全局的变量将其赋值给Ajax，该对象有一个request方法。request有两个参数，第一个为请求的url(必要的)，字符串类型，第二个opt为配置参数(可选...
AJAX基础概念、核心技术与典型案例(内涵动态实例)
12-27
程序描述：本章使用Prototype封装的Ajax对象实现上传文件时显示进度条的功能。当上传文件时，客户端同时显示文件上传的进度，从而及时了解文件传送情况。 /test.html 上传文件 /periodcal.jsp 上传文件...
JAVA上百实例源码以及开源项目
01-03
（1）提高文件的共享性（计算机程序和/或数据），（2）鼓励间接地（通过程序）使用远程计算机，（3）保护用户因主机之间的文件存储系统导致的变化，（4）为了可靠和高效地传输，虽然用户可以在终端上直接地使用它，...
java开源包1
06-28
JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...
java开源包4
06-28
JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码...
如何不用Ajax向后台传值 Spring MVC
Don-Talk的博客
01-10 1374
 思路： 1、将要传的数据装入数组 2、创建一个隐藏表单 3、遍历数组，在隐藏表单中创建隐藏的&lt;input&gt;并赋值 4、提交表单 function exportPurchases() { var data = []; $("input[name='purchaseId']:checked").each(function(i){...
6个你必须用到AJAX的地方与6个不必用到的地方
自由鱼√
03-27 705
 现在距离gmail改变了大家对使用网页应用程序的方式已经有一年多了。但是目前很多网页应用程序并没有使用充满活力的Ajax的优势来代替以前沉闷的html功能。下面是当前网页应用程序应该出现的地方： 基于表单的交互表单是很慢的，非常慢。尝试编辑位于del.icio.us上面的一个书签？点击编辑链接打开一个编辑书签的表单页面，然后编辑你的内容并点击提交 按钮等待整个提交过
不使用ajax实现无刷新提交表单,不使用ajax实现无刷新提交表单_javascript技巧
weixin_39555715的博客
08-05 154
HTML代码：这里是表单内容JS代码：若保存成功，后台返回{"ok":true}；若保存失败，后台返回{"ok":false, "msg":"错误信息"}function save() {$("#frm").submit();$("#fra").one("load", function () {var data = eval("(" + $("#fra").contents().find("bod...
必须用到和不必使用ajax的地方
xqdd的专栏
07-06 687
文章引自csdn读书频道现在距离gmail改变了大家对使用网页应用程序的方式已经有一年多了。但是目前很多网页应用程序并没有使用充满活力的Ajax的优势来代替以前沉闷的html功能。下面是当前网页应用程序应该出现的地方： 基于表单的交互 表单是很慢的，非常慢。尝试编辑位于del.icio.us上面的一个书签？点击编辑链接打开一个编辑书签的表单页面，然后编辑你的内容并点击提交按钮等待整个提交过程结束，
不使用Ajax，如何实现表单提交不刷新页面
sxmhj的博客
07-11 676
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;form method="POST" action=
为什么使用和不使用Ajax？
星星_月亮的光芒
10-26 1500
Ajax适用场景  　　1.表单驱动的交互  　　传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。  2.深层次的树的导航  　　深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript
03.WEB-HTML之JavaScript标签学习总结(一)
AlexMoonStriver的博客
01-15 798
一 JavaScript 介绍 1.1 什么是JavaScript: JavaScript是Web上一种功能强大的编程语言,用于开发交互式的web页面.它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行.     JavaScript被设计用来向HTML页面添加交互行为;    JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言);    JavaScript由
js 原生AJAX发送请求详解
热门推荐
木子小姐
06-12 1万+
使用XHR对象的基本步骤： (1)创建XHR对象 var xhr = new XMLHttpRequest( ); (2)监听XHR对象的状态改变事件 xhr.onreadystatechange = function(){ if( xhr.readyState===4){ if(xhr.status===200){ 完成且成功 } else { 完成但失败 } } } (3)打开到服务器的连接 ...
使用原生JavaScript来封装ajax请求
最新发布
04-17
非常欢迎您的提问！关于使用原生JavaScript来封装ajax请求，是一个很常见的问题。对于这个问题，我可以给您提供以下的思路和代码示例，帮助您更好地理解和实现： 思路： 1. 创建XMLHttpRequest对象 2. 设置请求参数，包括请求方法、请求URL、异步标识、请求头部等 3. 发送请求，并且设置回调函数，处理返回结果或者异常情况 4. 处理回调函数中的数据，例如更新页面、显示提示信息、打印日志等 代码示例： function ajax(url, options) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { options.success(xhr.responseText); } else { options.error(xhr.status); } } } xhr.open(options.method, url, options.async); for (var header in options.headers) { xhr.setRequestHeader(header, options.headers[header]); } xhr.send(options.data); } // 使用示例 ajax('https://api.example.com/getData', { method: 'GET', async: true, headers: { 'Content-Type': 'application/json' }, data: null, success: function(responseText) { console.log(responseText); }, error: function(status) { console.error('ERROR: ' + status); } }); 希望以上的思路和代码示例对您有所帮助！如果您有任何其他问题，也欢迎随时向我提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值