Web前端开发之前后端交互04——监听表单提交事件、模板引擎art-template、XMLHttpRequest、 URL编码、​ 数据交换格式

目录

监听表单提交事件：

模板引擎：

 XMLHttpRequest:

 URL编码：

 数据交换格式：

 JSON：

JSON和JS互转：

监听表单提交事件：

在JQ中有两种办法来监听表单提交事件：

阻止表单默认提交事件：

由于表单会默认选择跳转到指定页面。

在之前的JQ中我们学到了序列化表单的方法，这里就可以用到它。

我们希望读取全部表单的元素，注意必须存在name属性。

模板引擎：

art-template:用于渲染大量数据 。

首先我们使用原生方法渲染时，代码如下：

<div class="title"></div>
<div class="infoPart">
	<div>name：<span></span></div>
	<div>age：<span></span></div>
	<div>isVip：<span></span></div>
	<div>RegTime：<span></span></div>
	<div>
		abilities:
		<ul class="abilities">
		</ul>
	</div>

</div>
<script>
	let data={
        title:'<h3>User Info</h3>',
		name:'zs',
		age:20,
		isVIP:true,
		regTime:new Date(),
		hobby:['eating','sleeping','hitBean']
	}
    $('.title').html(data.title)
	$('.infoPart>div:nth-child(1)>span').html(data.name)
    $('.infoPart>div:nth-child(2)>span').html(data.age)
    $('.infoPart>div:nth-child(3)>span').html(data.isVIP)
    $('.infoPart>div:nth-child(4)>span').html(data.regTime)
	$.each(data.hobby,function (index,item) {
		$('.abilities').append(`<li>${item}</li>`)
    })
</script>

需要不断重复导入html文本，看起来比较繁琐。

示例：

<div class="tpl-in">

</div>

<!--</div>-->
<script type="text/html" id="tpl-user">
<!--	模板定义区域，记得修改type，并赋值id属性-->
	<h2 class="title">{{title}}</h2>
	<div class="infoPart">
		<div>name：<span>{{name}}</span></div>
		<div>age：<span>{{age}}</span></div>
		<div>isVip：<span>{{isVIP}}</span></div>
		<div>RegTime：<span>{{regTime}}</span></div>
		<div>
			abilities:
			<ul class="abilities">
				<li>{{hobby[0]}}</li>
				<li>{{hobby[1]}}</li>
				<li>{{hobby[2]}}</li>
			</ul>
		</div>
	</div>
</script>
<script>
	//定义数据
	let data={
        title:'User Info',
		name:'zs',
		age:20,
		isVIP:true,
		regTime:new Date(),
		hobby:['eating','sleeping','hitBean']
	}
    //模板方法
	let getHtml=template('tpl-user',data)//绑定数据和script模板
	$('.tpl-in').html(getHtml)//写入

语法：

 XMLHttpRequest:

 Get请求：

 使用xhr对象拼接查询字符串：

  Post方法：

 什么是查询字符串：

 本质：

 URL编码：

 数据交换格式：

 XML:

HTML与XML的区别：

 JSON：

 JSON必须使用双引号描述字符串。 

 JSON和JS对象的关系：

JSON和JS互转：

	let jsDataObj={
        name:'polaris',
		age:18,
		hobby: 'IT'
	}
    let jsDataArr=[1,2,3,'string1',[1,2,3],jsDataObj]

	//JS转JSON
	let jsonDataObj=JSON.stringify(jsDataObj)
    let jsonDataArr=JSON.stringify(jsDataArr)
    console.log(jsonDataObj,jsonDataArr)

	//JSON转JS
    let jsDataObjTrans=JSON.parse(jsonDataObj)
    let jsonDataArrTrans=JSON.parse(jsonDataArr)
    console.log(jsDataObjTrans,jsonDataArrTrans)

输出：

 序列化和反序列化：