js文件与html相互传值

前言

js文件是前端最常用的，必然是要与html之间进行交互。简单总结

正文

第一种形式

js文件

//登录方法
function login(username, password) {
	$.ajax({
		type: "post", // 以post方式发起请求
		url: "http://localhost:8080/login", // 你的请求链接
		data: { // 提交数据
			"username": username, // 前者为字段名，后者为数据
			"password": password,
		},
		success(data) {
			// data为返回值,这里只返回了用户名
			// 成功后的回调方法
			if (data.toString() == username) {
				//输入的值与后端返回值相同跳转的界面
				window.location.href = '../yw_cjrlxbtsq.html';
			} else if (data.toString() == "lose") {
				//登录失败后的提示
				alert("用户名或密码错误！")
			}
		}
	})
}; //初始化方法

HTML中的方法

//引用对应的js文件
<script src="../static/js/login/login_file.js"></script>
$(function() { 
	$("#btck").click(function() { //click方法是标签点击时触发
			var log=login;
			//调用登录方法，username，password是用户名和密码放在log方法的括号中就可以直接传到js文件中
			log(username,password);
				}
});//click

第二种形式

function details(categoryId,contentId) {
	$.ajax({
		type: "post", // 以post方式发起请求
		url:  "http://localhost:8080/viewList", // 你的请求链接
		data: { // 提交数据
			"categoryId": categoryId,
			"contentId": contentId // 前者为字段名，后者为数据	
		},
		success(data) {
		//从返回值中取出标题内容
		var title=data.data[0].title
		//通过name传入html中，name可以根据需要来命名
		document.getElementById("name").innerHTML=title;
		}

	})
};

html相关代码

//引用js文件
<script src="./static/js/base/details_file.js"></script>
//显示name的值，其中name名称要与js中的名称保持一致
<span id="name"></span>
//调用js中的方法
<script type="text/javascript">
window.onload = function() {
		var categoryId = 123;
		var articleId = 456;
		details(categoryId,articleId);
};
</script>

第三种

function indexLoad() {
	$.ajax({
		type: "post", // 以post方式发起请求
		url:  "http://localhost:8080/viewList", // 你的请求链接
		data: { // 提交数据
			"categoryId": 123,
			"contentId": 456 // 前者为字段名，后者为数据	
		},
		success(data) {
		//定义一个list赋值为空
		   var list = "";
			var areasList = data.data;
			for (var i = 0; i < data.data.length; i++) {
				//标题
				var title1 = data.data[i].title
				//时间，格式只留年月日，去掉时分秒
				var date1 = /\d{4}-\d{1,2}-\d{1,2}/g.exec(data.data[i].updateDate);
				list +=
					'<li><a>' + title1 + '</a><span>' + date1 + '</span></li>'
			}
			document.getElementById('theme_body').innerHTML = list;
		}

	})
};

html代码

<div class="main_rights2 mg_auto">
		<ul id="theme_body" ></ul>
</div>
<script>
window.onload = function() {
	var wurl = indexLoad;
	wurl();
};
</script>

效果图如下

结束

虽然整篇都是代码，没什么文字描述，也可能有些错误，欢迎大家及时指出，并共同进步！