Products
GG网络技术分享 2025-03-18 16:14 1
1、使用场景：
安全性都一样，都是发送的http协议。安全性与提交文件的业务处理（格式检测，防注入）有关，与提交方式无关。
一般登录用表单提交，点击提交触发submit事件，一般会 使页面发生跳转，页面的跳转等行为的控制往往在后端，后端控制页面的跳转及数据的传递；但是某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或数据变化，一般这种异步操作，都会使用ajax。
但是Ajax会有个隐藏的问题，即浏览器不保存密码，不符合用户习惯。理想的方式：建立隐藏的iframe，把form标签的target指向iframe，然后检测iframe的状态。
2、比较：
（1）ajax在提交、请求、接收时，都是异步进行，网页不需要刷新，只刷新页面局部，不关心也不影响页面其他部分的内容。
Form提交则是新建一个页面，哪怕是提交给自己本身的页面，也需要刷新，为了维持页面用户对表单的状态改变，要在控制器和模板之间传递更多参数以保持页面状态。
（2）ajax提交时，是在后台新建一个请求。
Form却是放弃本页面，然后再请求。
（3）ajax必须要用js来实现，存在调试麻烦、浏览器兼容问题，而且不启用js的浏览器，无法完成操作。
Form表单是浏览器自带的，无论是否开启js，都可以提交表单。
（4）ajax在提交、请求、接收时，整个过程都需要使用程序来对其进行数据处理。
Form表单提交，是根据表单结构自动完成，不需要代码干预。用submit提交。
3、其他方面：
关于输入内容的校验，ajax可以在获取到元素内容用程序判断；form表单的属性中有校验的字段，easyui，jeecg等中都封装，用户只需添加正则表达式的校验规则。
4、例：
（1）使用form提交
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<title>login test</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
</head>
<body>
<div id=\"form-div\">
<form id=\"form1\" action=\"/users/login\" method=\"post\">
<p>用户名：<input name=\"userName\" type=\"text\" id=\"txtUserName\" tabindex=\"1\" size=\"15\" value=\"\"/></p>
<p>密 码：<input name=\"password\" type=\"password\" id=\"TextBox2\" tabindex=\"2\" size=\"16\" value=\"\"/></p>
<p><input type=\"submit\" value=\"登录\"> <input type=\"reset\" value=\"重置\"></p>
</form>
</div>
</body>
</html>
（2）使用ajax提交
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<title>login test</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<script src=\"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js\"></script>
<script type=\"text/javascript\">
function login() {
$.ajax({
type: \"POST\",
dataType: \"json\",//服务器返回的数据类型
contentType: \"application/json\",//post请求的信息格式
url: \"/users/login\" ,
data: $(\'#form1\').serialize(),
success: function (result) {
console.log(result);//在浏览器中打印服务端返回的数据(调试用)
if (result.resultCode == 200) {
alert(\"SUCCESS\");
};
},
error : function() {
alert(\"异常！\");
}
});
}
</script>
</head>
<body>
<div id=\"form-div\">
<form id=\"form1\" onsubmit=\"return false\" action=\"##\" method=\"post\">
<p>用户名：<input name=\"userName\" type=\"text\" id=\"txtUserName\" tabindex=\"1\" size=\"15\" value=\"\"/></p>
<p>密 码：<input name=\"password\" type=\"password\" id=\"TextBox2\" tabindex=\"2\" size=\"16\" value=\"\"/></p>
<p><input type=\"button\" value=\"登录\" onclick=\"login()\"> <input type=\"reset\" value=\"重置\"></p>
</form>
</div>
</body>
</html>
ajax获取网页添加到div中的方法
1：利用DOM获取该 div 的 ID，然后清空该DIV的内容（如果你需要接着里面的内容添加可不要清空）；需要注意点是清空最好用“ empty() ”；
2: 把 async设成true ,否则又一条警告的错误，这条错误导致你的内容显示不出来；下面就是警告的错误
3:就是添加HTML了。
具体代码如下：
| <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>测试</title> </head> <body> <div id=\"tset\"> <a href=\"http://www.baidu.com\">百度</a> </div> <button id=\"btn\">测试</button> </body> <script src=\"../../Js/jquery-3.4.1.js\"> </script><script src=\"../../Js/layer-v3.1.1/layer/layer.js\"></script> <script> $(function(){ $(\"#btn\").click(function(){ $.ajax({ url:\'../../Html/JQueryDome/弹框.html\', dataType:\'html\', type:\'get\', async:true, success:function(data){ console.log(data); $(\"#tset\").html(data) },error:function(){ } }) }) }) </script> </html> |
最后总结一下清空DIv的内容的方法
| empty() 情况选择器里面的内容 语法 $(“选择器”).empty() remove() 删除后再恢复事件不在 语法 $(“选择器”).remove() detach() 删除后再恢复事件在 语法 $(“选择器”).detach() |
顺便把其余的也给出来吧：
包裹
| wrap() 每一个外面都添加一个新的元素 语法 $(“选择器”).wrap(“<元素名称>”) wrapAll() 同一包裹一个元素 语法 $(“选择器”).wrap(“<元素名称>”) wrapInner() 在里面添加一个新的元素 语法 $(“选择器”).wrap(“<元素名称>”) unwrap() 去掉包裹 语法 $(“选择器”).wrap(“<元素名称>”) |
外部插入
| after() 在后面插 语法： $(“选择器”).after(“<元素名称>”) insertAfter() 在后面插 语法： $(“选择器”).insertAfter(“<元素名称>”) before 在后面插 语法： $(“选择器”).before(“<元素名称>”) insertBefore() 在后面插 语法： $(“选择器”).insertBefore(“<元素名称>”) |
内部插入(在)
| append() 在后面插 语法： $(“选择器”).append(“<元素名称>”) appendTo() 在后面插 语法： $(“<元素名称>”).appendTo(“选择器”) prepend() 在前面插 语法： $(“选择器”).prepend(“<元素名称>”) prependTo() 在前面插 语法： $(“<元素名称>”).prependTo(“选择器”) |
替换
| replaceWith() 语法 $(“选择器”).replaceWith($(“选择器”)) replaceAll 语法 $(“<元素名称>”).replaceAll (““选择器” |
克隆
| clone() |
语法：
| 1、$(“选择器”).clone().append(“元素名”) 2、$(“选择器”).append($(“元素名”).clone()) |
对了，还有一点就是（当然我是MVC中遇到的，不确定都有哟），就是在获取的网页中有内部JS，比如<script>这里是一个获取本地的时间函数</script>，然后当你执行AJAX时，页面不会添加到DIV中，整个页面就是是当前时间（但是地址没有变化）。解决办法：可以把该JS删除，或者该JS换成一个外部JS即可。
以上就是ajax获取网页添加到div中的方法的详细内容，更多请关注网站的其它相关文章！
Demand feedback
