javascript - 如何在javascript函数的变量中运行jsp页面

标签 javascript jquery html jsp

我可以在 javascript 函数的变量中运行 jsp 页面吗?

我的网页如下所示:

enter image description here

我将在文本框中填写数据,但是当我单击“添加行”按钮时,将触发 JavaScript 函数并动态添加行,如下所示。 enter image description here

以及 JavaScript 函数:

function addRow() {    
    var table = document.getElementById('my_table'); //html table
    var rowCount = table.rows.length; //no. of rows in table
    var columnCount =  table.rows[0].cells.length; //no. of columns in table          
    var row = table.insertRow(rowCount); //insert a row            

    var cell1 = row.insertCell(0); //create a new cell           
    var element1 = document.createElement("input"); //create a new element           
    element1.type = "checkbox"; //set the element type 
    element1.setAttribute('id', 'newCheckbox'); //set the id attribute   
    element1.setAttribute('checked',true); //set checkbox by default checked  
    cell1.appendChild(element1); //append element to cell

    var cell2 = row.insertCell(1);            
    var element2 = document.createElement("input");            
    element2.type = "text"; 
    element2.setAttribute('id', 'newInput'); //set the id attribute
    element2.setAttribute('name', 'sl'+rowCount);
    element2.setAttribute('style', 'width: 50px');
    cell2.appendChild(element2);      

    var cell3 = row.insertCell(2);            
    var element3 = document.createElement("input");            
    element3.type = "textarea"; 
    element3.setAttribute('rows', '4');
    element3.setAttribute('cols','40');
    element3.setAttribute('id', 'newInput'); //set the id attribute
    element3.setAttribute('name', 'discription'+rowCount);
    cell3.appendChild(element3);         

    var cell4 = row.insertCell(3);            
    var element4 = document.createElement("input");            
    element4.type = "text"; 
    element4.setAttribute('id', 'newInput'); //set the id attribute
    element4.setAttribute('name', 'quantity'+rowCount);
    cell4.appendChild(element4);


    var cell5 = row.insertCell(4);            
    var element5 = document.createElement("input");            
    element5.type = "text"; 
    element5.setAttribute('id', 'newInput'); //set the id attribute
    element5.setAttribute('name', 'price'+rowCount);
    cell5.appendChild(element5);



    var cell6 = row.insertCell(5);            
    var element6 = document.createElement("input");            
    element6.type = "text"; 
    element6.setAttribute('id', 'newInput'); //set the id attribute
    element6.setAttribute('name', 'CST'+rowCount);
    element6.setAttribute('style', 'width: 50px');
    cell6.appendChild(element6);


    var cell7 = row.insertCell(6);
    var element7 =  window.href("www.google.co.in");
    element7.setAttribute('id', 'vat5'); //set the id attribute 
   element7.setAttribute('name','tax'+rowCount);
   element7.setAttribute('value','vat5');

   cell7.appendChild(element7);
}

每当我单击“Addrow”函数时,在最后一个单元格“Vat5.5”处,应运行一个 jsp 页面,并且 jsp 页面中存在的数据应显示在“Vat5.5”单元格中。我尝试使用 window.hrefwindow.location 但它们正在导航到 jsp 页面并显示数据。但我的要求是在单元格本身中显示jsp页面的数据。我不知道这是否可能。

编辑:我尝试使用ajax,但它无法正常工作

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
    var cell7 = row.insertCell(6);
    var element7 = $.ajax({
        url: "/SalesPropeller/Admin/Sales/goal.jsp",
        success: function() {
            alert("success");
        },
        error: function() {
            alert("Your error");
        },

    });


   element7.setAttribute('id', 'vat5'); //set the id attribute 
   element7.setAttribute('name','tax'+rowCount);
   element7.setAttribute('value','vat5');

   cell7.appendChild(element7);
    }

goal.jsp

<body>
 <div id="welcomeDiv"  style="display:none;" class="answer_list">WELCOME</div>
</body>

最佳答案

Javascript是客户端,而JSP是服务器端。所以你没有选择询问服务器数据。 有两种可能性,具体取决于您的需要:ajax 或 websocket。

就像评论中一样,ajax 可以使用纯 javascript 调用,也可以使用 jquery 轻松调用,如下所示:

$.ajax({
        url: url + "/yourjsp.jsp",
        data: "parameter=" + yourOptionelParameter,
        async: false,
        success: function(data) {
            addRow(data);
        },
        error: function() {
            alert("Your error");
        },
        contentType: 'charset=utf-8'
    });

要使用jquery,您必须下载jquery库并将其放入您的资源中: https://code.jquery.com/jquery-3.0.0.min.js

并插入它:

<script src="jquery-3.0.0.min.js"></script>

现在您可以访问 JSP,您必须使用例如 JSON(编码服务器端)来呈现您的数据: https://javaee-spec.java.net/nonav/javadocs/javax/json/JsonObjectBuilder.html

关于javascript - 如何在javascript函数的变量中运行jsp页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37851892/

相关文章:

javascript - 只显示固定元素上方的背景图像/颜色

jQuery-从悬停中排除

javascript - 在提交表单时一个接一个地启用选项卡

html - 是否可以不针对正文中的横幅?

javascript - 在 ListView 中显示数据 JavaScript

javascript - 当手动和以编程方式更改文本字段的值时,是否应该触发 change 事件?

javascript - 如何在 Notepad++ 上安装 JSLint 插件?

javascript - 跨文件合并的 TypeScript 命名空间

javascript - 如何通过 jQuery AJAX 传递 PHP 变量

javascript - 调整大小/移动后将上传的图像应用到 Canvas 中