Question

我正在尝试通过锚标记和javascript重定向到我的ServletController。

现在它适用于Google Chrome，而不适用于IE。到目前为止，我在网上浏览了两天，发现IE与动态元素的setAttribute不兼容，所以我不得不切换到使用actual属性并为其赋值。

锚点假设是创建一个动态表单并进行表单提交，然后向我的Servlet创建一个新请求，但出于某种原因，当我在javascript中单击锚点时它什么都不做。但是，当我点击chrome中的锚点时，它会正确完成并将我重定向到下一页，没有任何问题。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Account</title>
<meta name="description" content="eTeam Bank">
<meta name="author" content="Abraham Cabrera">
<link rel="stylesheet" type="text/css" href="css/mystyles.css">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
<script type="text/javascript"> 
function anchorRedirect(username, user_id, operation) {
"use strict";
var form = document.createElement("form");
form.name="form";
form.id="form";
form.method = "post";
form.action = "ServletController";

var hiddenField1 = document.createElement("input");
hiddenField1.type = "hidden";
hiddenField1.name = "username";
hiddenField1.value = username;
form.appendChild(hiddenField1);

var hiddenField2 = document.createElement("input");
hiddenField2.type = "hidden";
hiddenField2.name = "user_id";
hiddenField2.value = user_id;
form.appendChild(hiddenField2);

var hiddenField3 = document.createElement("input");
hiddenField3.type = "hidden";
hiddenField3.name = "operation";
hiddenField3.value = operation;
form.appendChild(hiddenField3);

form.submit();
}
</script>
</head>
<body>
<header>
    <div id="title">eTeam Bank</div>
</header>

<div id="container">
    <div class="userTitle" >
        <div class="user">
            Welcome: user
        </div>
        <div class="userTime">
        Thu Jan 31 09:24:16 EST 2013
        </div>
    </div>
    <div class="accountBox" >
        <div class="accountSpace"></div>
        <div id="accountAnchor">
        <a href="javascript:anchorRedirect('user', '2', 'loadPersonalInfo');">Personal Info</a> 
        </div>
        <div id="accountAnchor"> 
        <a href="javascript: anchorRedirect('user', '2', 'loadAccountInfo')">Account Info</a> 
        </div>
        <div id="accountAnchor"> 
        <a href="javascript: anchorRedirect('user', '2', 'loadAccountSum')">Account Summary</a> 

        </div>
    </div>
</div>

<footer>
    <div id="footerContent">Abraham Cabrera &copy; 2013</div>
</footer>

其他细节：
1.这不适用于任何类型的生产企业或公司，仅用于个人学习 2.我尝试直接通过url路径传递变量，而不使用java脚本函数，但这不符合我的要求，因为我需要向我的ServletController发出新请求，以便通过模型类获取用户帐户信息或它曾经进行过操作并将其转发回视图。

Answer 1

我注意到如果我接受你的代码并添加一个id ='form_div1'的div并在提交之前将新创建的表单附加到它，它将从FireFox和IE开始工作。

var my_div = document.getElementById("form_div1");
my_div.appendChild(form);
form.submit();

Answer 2

我建议在HTML中创建表单（不是通过javascript），里面已经包含了所有必需的字段。然后，通过简单地设置隐藏字段的值并提交表单，您可以从根本上简化JS，而不是创建和设置元素。像

这样的东西

<form name="myform" id="myform" method="post" action="ServletController">
    <input type="hidden" name="username" value="">
    <input type="hidden" name="user_id" value="">
    <input type="hidden" name="operation" value="">
</form>

使用类似

的javascript

function anchorRedirect(username, user_id, operation) {
    document.myform.username.value = username;
    document.myform.user_id.value = user_id;
    document.myform.operation.value = operation;
    document.myform.submit();
}

锚中的Javascript不能与IE一起使用

2 个答案: