javascript / js / jquery的HtmlEncode

1.首先,javascript / js / jquery 没有 HtmlEncode 方法。

2.其次,如果是想给页面元素赋值,防止跨站攻击,可以对其innerText进行赋值,而不要对innerHTML赋值。

    xx.innerText = str 相当于 xx.innerHTML = HtmlEncode( str );

3.如果一定要一个HtmlEncode方法,可以参见:

   http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding

 1 function htmlEncode( html ) {
 2     return document.createElement( 'a' ).appendChild( 
 3         document.createTextNode( html ) ).parentNode.innerHTML;
 4 };
 5 
 6 function htmlDecode( html ) {
 7     var a = document.createElement( 'a' ); a.innerHTML = html;
 8     return a.textContent;
 9 };
10 
11 function htmlEncodeX(value){
12   //create a in-memory div, set it's inner text(which jQuery automatically encodes)
13   //then grab the encoded contents back out.  The div never exists on the page.
14   return $('<div/>').text(value).html();
15 }
16 
17 function htmlDecodeX(value){
18   return $('<div/>').html(value).text();
19 }
20 
21 var str = "<p>\t Hi \n There22 </p>";
22 var s1 = htmlEncodeX( str );
23 var s2 = htmlDecodeX( s1 );
24 alert( str );
25 alert( str == s2 );

测试位置:

http://jsfiddle.net/ThinkingStiff/FSaU2/

 

测试方法:把上面那段代码,覆盖到网址的左下框(javascript),然后点上方的Run按钮。带X的版本,无法在那个网页里运行,但本地测试,目前还遇到问题。不带X的版本,可以在那个网页里运行,而且本地运行也没问题。

转载于:https://www.cnblogs.com/xxxteam/archive/2013/04/16/3024151.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于静态HTML数据的查询、新增和获取账户信息的实现,可以使用JavaScript结合HTML和CSS来实现。具体步骤如下: 1. 查询数据:可以使用JavaScript的DOM(文档对象模型)来获取HTML中的数据,例如使用document.getElementById()或document.querySelector()方法获取特定元素的值。如果要查询多条数据,可以使用数组或循环语句来遍历HTML中的元素。 2. 新增数据:可以使用JavaScript的DOM来创建新的HTML元素,并添加到页面中。例如,使用document.createElement()方法创建新元素,然后使用appendChild()方法添加到指定的父元素中。 3. 获取账户信息:可以使用JavaScript的Ajax技术来获取服务器端的数据,并使用DOM将数据显示在HTML页面中。例如,使用XMLHttpRequest对象发送HTTP请求,然后解析服务器端返回的JSON或XML数据,使用DOM将数据显示在HTML页面中。 下面是一个简单的示例代码,实现对静态HTML中的数据进行查询和新增,并使用Ajax技术获取账户信息: HTML代码: ```html <!DOCTYPE html> <html> <head> <title>静态HTML数据查询、新增和获取账户信息</title> <meta charset="utf-8"> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } form { margin-top: 20px; } input[type=text] { padding: 6px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px; } input[type=submit] { padding: 6px 12px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> <h1>账户列表</h1> <table> <thead> <tr> <th>账户名</th> <th>密码</th> <th>邮箱</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>123456</td> <td>zhangsan@example.com</td> </tr> <tr> <td>李四</td> <td>abcdef</td> <td>lisi@example.com</td> </tr> <tr> <td>王五</td> <td>qwerty</td> <td>wangwu@example.com</td> </tr> </tbody> </table> <form id="addForm"> <h2>新增账户</h2> <label>账户名:</label> <input type="text" name="username"> <label>密码:</label> <input type="text" name="password"> <label>邮箱:</label> <input type="text" name="email"> <input type="submit" value="提交"> </form> <div id="accountInfo"> <h2>账户信息</h2> <p>账户名:<span id="username"></span></p> <p>密码:<span id="password"></span></p> <p>邮箱:<span id="email"></span></p> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body> </html> ``` JavaScript代码(使用jQuery库): ```javascript $(document).ready(function() { // 查询数据 var rows = $("table tbody tr"); console.log("账户数量:" + rows.length); rows.each(function() { var username = $(this).find("td:eq(0)").text(); var password = $(this).find("td:eq(1)").text(); var email = $(this).find("td:eq(2)").text(); console.log("账户名:" + username + ",密码:" + password + ",邮箱:" + email); }); // 新增数据 $("#addForm").submit(function(event) { event.preventDefault(); // 阻止表单提交 var username = $("input[name='username']").val(); var password = $("input[name='password']").val(); var email = $("input[name='email']").val(); var newRow = "<tr><td>" + username + "</td><td>" + password + "</td><td>" + email + "</td></tr>"; $("table tbody").append(newRow); alert("账户添加成功!"); }); // 获取账户信息 $("#accountInfo").hide(); // 隐藏账户信息 $("table tbody tr").click(function() { var username = $(this).find("td:eq(0)").text(); var password = $(this).find("td:eq(1)").text(); var email = $(this).find("td:eq(2)").text(); $("#username").text(username); $("#password").text(password); $("#email").text(email); $("#accountInfo").show(); // 显示账户信息 }); // 使用Ajax获取账户信息 $("table tbody tr").click(function() { var username = $(this).find("td:eq(0)").text(); $.ajax({ url: "account.php", data: {username: username}, dataType: "json", success: function(data) { $("#username").text(data.username); $("#password").text(data.password); $("#email").text(data.email); $("#accountInfo").show(); // 显示账户信息 }, error: function(xhr, status, error) { console.log("获取账户信息失败:" + error); } }); }); }); ``` 其中,使用了jQuery库来简化代码,实现了对静态HTML数据的查询、新增和获取账户信息的功能。需要注意的是,使用Ajax获取账户信息需要在服务器端实现相应的数据接口,例如account.php文件中的代码: ```php <?php header('Content-Type: application/json'); $username = $_GET['username']; if ($username == '张三') { $data = array('username' => '张三', 'password' => '123456', 'email' => 'zhangsan@example.com'); } else if ($username == '李四') { $data = array('username' => '李四', 'password' => 'abcdef', 'email' => 'lisi@example.com'); } else if ($username == '王五') { $data = array('username' => '王五', 'password' => 'qwerty', 'email' => 'wangwu@example.com'); } else { $data = array('username' => '', 'password' => '', 'email' => ''); } echo json_encode($data); ?> ``` 以上代码实现了一个简单的静态HTML数据查询、新增和获取账户信息的功能,可以根据实际需求进行扩展和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值