山东医院项目经验汇总

最新推荐文章于 2022-02-22 16:38:39 发布

zhuixun1993

最新推荐文章于 2022-02-22 16:38:39 发布

阅读量273

点赞数

分类专栏： Web实战项目 # 代码小坑 SSM 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/u013165358/article/details/120048400

版权

代码小坑同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

Web实战项目

4 篇文章 0 订阅

订阅专栏

SSM

4 篇文章 0 订阅

订阅专栏

文章目录

1 如何实现a标签禁用
2 快速将form标签中的输入进行序列化
3 通过jquery操作某个select选中某个选项
4 页面之间传递中文参数乱码
5 页面之间传递参数的读取
6 带有文件以及常规字段的form如何提交
7 多个ajax顺序执行的问题
- 7.1 设置async=false
- 7.2 嵌套ajax或者设置在回调函数中
8 ajax中的return
9 前端传递数组，后台如何接收

1 如何实现a标签禁用

a标签没有disabled属性，因此需要通过其他方式禁用。这里提供一种方式：

$(".praise").attr("disabled",true).css("pointer-events","none");

取消禁用的话，把disabled改为false，并且pointer-events改为auto即可。

2 快速将form标签中的输入进行序列化

即把form表单中的数据变成key=value&key=value....的形式。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").text($("form").serialize());
  });
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

<button>序列化表单值</button>
<div></div>
</body>
</html>

在这里插入图片描述

注：form中的输入域包括input, ratio, textarea, select等等。

3 通过jquery操作某个select选中某个选项

比如

1、设置value为pxx的项选中

$(".selector").val("pxx");

2、设置text为pxx的项选中

$(".selector").find("option[text='pxx']").attr("selected",true);

这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

$(".selector").val();

4、获取当前选中项的text

$(".selector").find("option:selected").text();

————————————————
版权声明：本文为CSDN博主「nairuohe」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/nairuohe/article/details/6307367

4 页面之间传递中文参数乱码

使用函数encodeURI和decodeURI解决。

<script type="text/javascript">
	//编码：输出符号的utf-8形式，并且在每个字节前加上%,注意是两次。
	var url = encodeURI("http://www.baidu.com/春节");
	document.write(url + "<br>");
	//解码
	var url = decodeURI(url);
	document.write(url);
</script>

//encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a- z，A-Z
//建议使用

实现结果：

http://www.baidu.com/%E6%98%A5%E8%8A%82
http://www.baidu.com/春节

5 页面之间传递参数的读取

在a.html页面通过location.href=b.html?k1=v1&k2=v2跳转到b.html时，如何读取到里面的参数？以下是一个方法。

String.prototype.GetValue = function (para) {
        let reg = new RegExp("(^|&)" + para + "=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?") + 1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

let url = decodeURI(document.location.toString());
let hosR_id = url.GetValue("hosR_id"); // 病历的主键
let hosR_name = url.GetValue("hosR_name"); // 病人姓名

6 带有文件以及常规字段的form如何提交

首先肯定不能使用data = form.serialize()设置data，因为文件是二进制信息，序列化之后会破坏文件对象。而且事实上form.serialize()是通过在uri后面追加k=v的形式设置的参数。

这里使用一个封装对象来操作：FormData

var formData = new FormData(document.getElementById("myForm"));//表单id
        $.ajax({
            url: '/drug',
            type: 'POST',
            processData: false,//这个必须有，不然会报错
            contentType: false,//这个必须有，不然会报错
            data: formData,
            cache: false,
            dataType: 'json',
            success: function (vo) {
                if (vo.code == 200) {
                    window.location.href = "index.html";
                } else {
                    alert("添加失败！" + vo.msg);
                }
            }
        });

7 多个ajax顺序执行的问题

由于ajax是发送的是异步请求，因此当函数中存在多个ajax请求时，不能保证哪个先完成。要想让他们按顺序进行，有两种解决方案：

7.1 设置async=false

设置之后，相当于程序只有执行完当前的ajax之后才能继续后续的操作。

$.ajax({
	async:false,
	...
});
// 后续的操作需要在ajax响应结束后执行

7.2 嵌套ajax或者设置在回调函数中

$.ajax({
	...
	success: funtion(vo){
		$.ajax({});
	}
});

8 ajax中的return

ajax中的return并不能让调用ajax的函数返回，而只是ajax返回而已。如果想要实现函数根据ajax的响应结果返回，应该设置一个ajax之外的全局变量，ajax响应函数操作该变量来实现功能。这里需要搭配async来使用（否则程序会先于ajax响应返回之前就提交）。

参考：https://www.shuzhiduo.com/A/Vx5M62gdNr/

function a(){
	var f = true;
	$.ajax({
		...,
		async: false,
		success:function(vo){
			...
			f = false;
		}
	});
	return f;
}

9 前端传递数组，后台如何接收

由于项目中用到了导出excel表格的功能，前台通过传递哪些行被选中，将被选中的行编号传递给后台。后台将查询到的结果封装成excel表格。这里前台的多个行编号被保存在了数组中。

function delAll() {
        var alls = document.getElementsByName("check");
        var ids = new Array();
        for (var i = 0; i < alls.length; i++) {
            if (alls[i].checked) {
                ids.push(alls[i].value);
            }
        }

        if (ids.length > 0) {
            if (confirm("确认操作?")) {
                //alert("成功!");
                location.href = "/drug/excel/" + ids.toString();
                // $.ajax({
                //     url: "/drug/excel",
                //     type: "POST",
                //     data: {
                //         "ids": ids.toString()
                //     },
                //     success: function (vo) {
                //         if (vo.code === 200) {
                //             alert("导出成功！");
                //         } else {
                //             alert("导出失败！" + vo.msg);
                //         }
                //     }
                // });
            }
        } else {
            alert("请选中要操作的项");
        }
    }

该数组可以直接作为参数传递，假如数组为[1,2,3,4,5]，则传递的格式为1,2,3,4,5。后台接收这个字符串，然后通过split分割为字符串数组进行后续操作即可。

zhuixun1993

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
山东医院项目经验汇总

文章目录1 如何实现a标签禁用2 快速将form标签中的输入进行序列化3 通过jquery操作某个select选中某个选项4 页面之间传递中文参数乱码5 页面之间传递参数的读取6 带有文件以及常规字段的form如何提交7 多个ajax顺序执行的问题7.1 设置async=false7.2 嵌套ajax或者设置在回调函数中8 ajax中的return9 前端传递数组，后台如何接收1 如何实现a标签禁用a标签没有disabled属性，因此需要通过其他方式禁用。这里提供一种方式：$(".praise").
复制链接

扫一扫

专栏目录