010_URL中JavaScript代码的作用和用法示例

1. 样式如下的JavaScript代码 :

<a href="javascript:;" class="delete" onclick="m1()">删除</a>
<script type="text/javascript">
	function m1(){
		alert('触发了点击事件') ;
	}
</script>

　　上述代码中的   href="javascript:;"    阻止了超链接的跳转事件,然后去触发后面的单击事件,执行m1函数.

2. 表单提交

<form id="orderForm" action="http://www.baidu.com" method="post">
				
</form>
			
<a href="javascript:document.getElementById('orderForm').submit();">提交form表单</a>

　　上述代码中的超链接位于form表单的外面,属性href中嵌入了JS代码,这样可以通过form表单外的标签触发提交事件.

　　表单的提交使用下面的方式更为简便,代码如下 : 

<form id="orderForm" action="http://www.baidu.com" method="post">
			
</form>
<a href="javascript:;" onclick="submitForm()">JQuery超链接提交form表单</a>
<button type="button" onclick="submitForm()">JQuery按钮button提交表单</button>
		
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	function submitForm(){
		$('#orderForm').submit() ;
	}
</script>

　　

3. URL中的JS代码小结   :  以下内容参考其他资料

3.1 将JS代码放置在伪协议说明符    javascript:    后的URL中,该协议类型声明了URL的主题是任意的JS代码,它由JS的解释器运行.如果有多条JS代码,必须使用分号隔开.示例如下 : 

<a href="javascript:var now = new Date() ; '<h1>The time is</h1>' + now ;">测试</a>

　跳转后截图如下 : 

JS中的变量now传递给了跳转之后的页面,完成了在URL中传递JS变量的操作.

当浏览器载入一个Javascript URL时，它会执行URL中所包含的Javascript代码，并且使用最后一个Javascript语句或表达式的值，转换为一个字符串，作为新载入的文档的内容显示。这个字符串值可能包含HTML标记，并且像载入到浏览器中的其它文档那样格式化显示。

3.2 Javascript URL也可以包含执行操作但不返回值的Javascript语句，如 : 

<a href="javascript:alert('hello world');">百度</a>

　　此时当载入这种类型的URL的时候，浏览器执行Javascript代码，但由于没有值作为新的文档来显示，所以它不会改变当前显示的文档。

3.3 通常，我们希望使用一个Javascript URL来执行某些Javascript代码而不改变当前显示的文档的JS代码。要做到这点，必须保证URL中最后一条语句没有返加值。一种方式是，使用void运算符来显式指定一个underfined的值。只需要在Javascript URL的结尾使用void(0);或者在javascript：void(/* code */);即可。

例如 : 下面的URL将打开一个新的空浏览器窗口,而不改变当前窗口的内容 : 

<a href="javascript:window.open('about:blank');void(0);">test</a>