简体   繁体   English

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

[英]How to run a jsp page in a variable of a javascript function

Can I run a jsp page in variable of a javascript function? 我可以在javascript函数变量中运行jsp页面吗?

My web page looks like this: 我的网页看起来像这样:

在此处输入图片说明

I will fill the data in the text boxes but when I click on "Add row" button then a javascript function will be triggered and rows are added dynamically which is as follows. 我将在文本框中填充数据,但是当我单击“添加行”按钮时,将触发javascript函数,并动态添加行,如下所示。 在此处输入图片说明

And the javascript function: 和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);
}

Whenever I click on "Addrow" function then at the last cell which is "Vat5.5", a jsp page should run and the data present in jsp page should be displayed in the cell which is "Vat5.5". 每当我单击“添加”功能,然后在最后一个单元格为“ Vat5.5”时,应运行一个jsp页面,并且应在“ Vat5.5”单元格中显示jsp页面中的数据。 I tried using window.href and window.location but they are navigating to the jsp page and displaying the data. 我尝试使用window.hrefwindow.location但是它们正在导航到jsp页面并显示数据。 But my requirement is to display the data of jsp page in the cell itself. 但是我的要求是在单元格本身中显示jsp页面的数据。 I dont know whether this will be possible or not. 我不知道这是否可能。

Edit: I tried using ajax but it's not working properly 编辑:我尝试使用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 is client side whereas JSP is server side. Javascript是客户端,而JSP是服务器端。 So you don't have choice to ask server datas. 因此,您不必选择询问服务器数据。 Two possibilities depending what you need are ajax or websocket. 取决于您需要的两种可能性是ajax或websocket。

Like in the comment ajax can be called with pure javascript or easily with jquery like this : 就像在评论中一样,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'
    });

To use jquery, you have to donwload jquery library and put it in your resources : https://code.jquery.com/jquery-3.0.0.min.js 要使用jquery,您必须下载jquery库并将其放入资源中: https ://code.jquery.com/jquery-3.0.0.min.js

And insert it with : 并插入:

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

Now you can reach the JSP, you have to present your datas using for exemple JSON (encoding serverside) : https://javaee-spec.java.net/nonav/javadocs/javax/json/JsonObjectBuilder.html 现在您可以访问JSP,您必须使用示例JSON(在服务器端编码)显示数据: https : //javaee-spec.java.net/nonav/javadocs/javax/json/JsonObjectBuilder.html

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM