将元素的值从 servlet 和 return 数据更改为网页而不用 ajax 刷新
Change an element's value from servlet and return data to webpage without refresh with ajax
我有一个网页和一个 servlet。我在网页中使用 javascript 动态创建输入元素。 servlet 是评估一些数学计算的后端。我正在从动态创建的输入元素中获取要发送到 servlet 的数据。这些输入元素 id 也是动态创建的。我能够毫无错误地检索数据和创建元素。
但是，我想在 servlet 中评估一些数学运算，然后将结果发送到网页中的 'result' 文本框。所以我不想刷新网页。因为 'result' id 文本框也在动态创建。
相关html代码。
<form action="/TYT_Mat_Soru_Cozumu_Java_war_exploded/Servlet/HesaplamaIslemleri" method="post" id="sayilarForm">
<input type="hidden" name="grupNoTutan" id="grupNoTutan"></input>
</form>
动态创建输入元素的代码。
function sayiEklemeKutular(operatorTipi){
var satir_1Div = document.createElement("div");
satir_1Div.setAttribute("class", "row");
satir_1Div.setAttribute("id", grup_no + "_satir_1");
var satir_2Div = document.createElement("div");
satir_2Div.setAttribute("class", "row");
var satir_3Div = document.createElement("div");
satir_3Div.setAttribute("class", "row");
var satir_4Div = document.createElement("div");
satir_4Div.setAttribute("class", "row");
var satir_5Div = document.createElement("div");
satir_5Div.setAttribute("class", "row");
var node = "";
switch (operatorTipi) {
case "+":
node = document.createTextNode('+');
break;
case "-":
node = document.createTextNode('-');
break;
case "*":
node = document.createTextNode('*');
break;
case "/":
node = document.createTextNode('/');
break;
case "√":
node = document.createTextNode('√');
break;
case "0/":
node = document.createTextNode('0/');
break;
case "^√==":
node = document.createTextNode('^√==');
break;
case "^==":
node = document.createTextNode('^==');
break;
default:
node = document.createTextNode('Hata');
}
satir_3Div.appendChild(node);
satir_3Div.style.textAlign = "center";
satir_3Div.style.fontSize = "14pt";
satir_3Div.style.fontColor = "#ffffff";
var satir_2_sutun_1Div = document.createElement("div");
var satir_2_sutun_2Div = document.createElement("div");
var satir_2_sutun_3Div = document.createElement("div");
satir_2_sutun_1Div.setAttribute("class", "col");
satir_2_sutun_2Div.setAttribute("class", "col");
satir_2_sutun_3Div.setAttribute("class", "col");
var satir_4_sutun_1Div = document.createElement("div");
var satir_4_sutun_2Div = document.createElement("div");
var satir_4_sutun_3Div = document.createElement("div");
satir_4_sutun_1Div.setAttribute("class", "col");
satir_4_sutun_2Div.setAttribute("class", "col");
satir_4_sutun_3Div.setAttribute("class", "col");
var satir_5_sutun_1Div = document.createElement("div");
var satir_5_sutun_2Div = document.createElement("div");
var satir_5_sutun_3Div = document.createElement("div");
satir_5_sutun_1Div.setAttribute("class", "col");
satir_5_sutun_2Div.setAttribute("class", "col");
satir_5_sutun_3Div.setAttribute("class", "col");
var kokDerece1 = document.createElement("input");
var kokKatsayi1 = document.createElement("input");
var kokIciDeger1 = document.createElement("input");
kokDerece1.setAttribute("name", grup_no + "_kokDerecesi_" + komponent_no);
kokDerece1.setAttribute("id", grup_no + "_kokDerecesi_" + komponent_no);
kokDerece1.setAttribute("class", "form-control");
kokDerece1.setAttribute("type", "text");
kokDerece1.setAttribute("placeholder", "Kökün Derecesi");
kokIciDeger1.setAttribute("name", grup_no + "_kokIciDeger_" + komponent_no);
kokIciDeger1.setAttribute("id", grup_no + "_kokIciDeger_" + komponent_no);
kokIciDeger1.setAttribute("class", "form-control");
kokIciDeger1.setAttribute("type", "text");
kokIciDeger1.setAttribute("placeholder", "Kök İçindeki Değer");
kokKatsayi1.setAttribute("name", grup_no + "_kokKatsayi_" + komponent_no);
kokKatsayi1.setAttribute("id", grup_no + "_kokKatsayi_"+ komponent_no);
kokKatsayi1.setAttribute("class", "form-control");
kokKatsayi1.setAttribute("type", "text");
kokKatsayi1.setAttribute("placeholder", "Kökün Katsayısı");
komponent_no = komponent_no + 1;
var kokDerece2 = document.createElement("input");
var kokIciDeger2 = document.createElement("input");
var kokKatsayi2 = document.createElement("input");
kokDerece2.setAttribute("name", grup_no + "_kokDerecesi_" + komponent_no);
kokDerece2.setAttribute("type","text");
kokDerece2.setAttribute("id", grup_no + "_kokDerecesi_" + komponent_no);
kokDerece2.setAttribute("class", "form-control");
kokDerece2.setAttribute("placeholder", "Kökün Derecesi");
kokIciDeger2.setAttribute("name", grup_no + "_kokIciDeger_" + komponent_no);
kokIciDeger2.setAttribute("type", "text");
kokIciDeger2.setAttribute("id", grup_no + "_kokIciDeger_" + komponent_no);
kokIciDeger2.setAttribute("class", "form-control");
kokIciDeger2.setAttribute("placeholder", "Kök İçindeki Değer");
kokKatsayi2.setAttribute("name", grup_no + "_kokKatsayi_" + komponent_no);
kokKatsayi2.setAttribute("type","text");
kokKatsayi2.setAttribute("id", grup_no + "_kokKatsayi_"+ komponent_no);
kokKatsayi2.setAttribute("class", "form-control");
kokKatsayi2.setAttribute("placeholder", "Kökün Katsayısı");
var sonucInput = document.createElement("INPUT");
sonucInput.setAttribute("class", "form-control");
sonucInput.setAttribute("name", grup_no + "_sonuc");
sonucInput.setAttribute("id", grup_no + "_sonuc");
sonucInput.setAttribute("placeholder", "Sonuç");
var silButon = document.createElement("BUTTON");
silButon.setAttribute("class", "btn btn-danger");
silButon.setAttribute("name", grup_no + "_silButon");
silButon.textContent = "Grubu Sil";
silButon.setAttribute("onclick", 'silButonununGrupNosunuGetir(this.getAttribute("name"))');
var hesaplaButon = document.createElement("BUTTON");
hesaplaButon.setAttribute("class", "btn btn-success");
hesaplaButon.setAttribute("type", "submit");
hesaplaButon.setAttribute("name", grup_no + "_hesaplaButon");
hesaplaButon.setAttribute("onclick", 'ismiHiddenaEkle(this.getAttribute("name"))');
hesaplaButon.textContent = "Hesapla";
komponent_no = 1;
grup_no = grup_no + 1;
satir_2_sutun_1Div.appendChild(kokDerece1);
satir_2_sutun_2Div.appendChild(kokKatsayi1);
satir_2_sutun_3Div.appendChild(kokIciDeger1);
satir_2Div.appendChild(satir_2_sutun_1Div);
satir_2Div.appendChild(satir_2_sutun_2Div);
satir_2Div.appendChild(satir_2_sutun_3Div);
satir_4_sutun_1Div.appendChild(kokDerece2);
satir_4_sutun_2Div.appendChild(kokKatsayi2);
satir_4_sutun_3Div.appendChild(kokIciDeger2);
satir_4Div.appendChild(satir_4_sutun_1Div);
satir_4Div.appendChild(satir_4_sutun_2Div);
satir_4Div.appendChild(satir_4_sutun_3Div);
satir_5_sutun_1Div.appendChild(sonucInput);
satir_5_sutun_2Div.appendChild(silButon);
satir_5_sutun_3Div.appendChild(hesaplaButon);
satir_5Div.appendChild(satir_5_sutun_1Div);
satir_5Div.appendChild(satir_5_sutun_2Div);
satir_5Div.appendChild(satir_5_sutun_3Div);
satir_1Div.appendChild(satir_2Div);
satir_1Div.appendChild(satir_3Div);
satir_1Div.appendChild(satir_4Div);
satir_1Div.appendChild(satir_5Div);
satir_1Div.style.marginTop = '30px';
satir_3Div.style.marginTop = '10px';
satir_4Div.style.marginTop = '10px';
satir_5Div.style.marginTop = '10px';
satir_1Div.style.backgroundColor = "#18A2D9";
satir_1Div.style.padding = "10px";
satir_1Div.style.borderRadius = "2em";
var formId = document.getElementById("sayilarForm");
formId.appendChild(satir_1Div);
}
The code that add sequence number of created dynamically element to a hidden element and calling the Ajax code.
function ismiHiddenaEkle(name){
var hiddenEleman = document.getElementById("grupNoTutan");
hiddenEleman.value = name;
hesaplaServleteGonder();
}
The Javascript code that contain Ajax.
function hesaplaServleteGonder(){
var butonAdi= document.getElementById("grupNoTutan").value;
var grup_no = butonAdi.charAt(0);
var i = 1;
var birinciKokDerecesi;
var birinciKatsayi;
var birinciKokIciDeger;
var ikinciKokDerecesi;
var ikinciKatsayi;
var ikinciKokIciDeger;
var sonuc;
birinciKokDerecesi = document.getElementById(grup_no + "_kokDerecesi_" + i).value;
birinciKatsayi = document.getElementById(grup_no + "_kokKatsayi_" + i).value;
birinciKokIciDeger = document.getElementById(grup_no + "_kokIciDeger_" + i).value;
sonuc = document.getElementById(grup_no + "_sonuc");
i= i + 1;
ikinciKokDerecesi = document.getElementById(grup_no + "_kokDerecesi_" + i).value;
ikinciKatsayi = document.getElementById(grup_no + "_kokKatsayi_" + i).value;
ikinciKokIciDeger = document.getElementById(grup_no + "_kokIciDeger_" + i).value;
i = 1;
$.ajax({
type:'POST',
url:'/TYT_Mat_Soru_Cozumu_Java_war_exploded/Servlet/HesaplamaIslemleri',
dataType: 'json',
contentType:'application/json',
data: $('#sayilarForm').serialize() ,
cache:false,
success:function(data){
alert(data);
$('#sonuc').text(responseText);
},
error:function(){
alert('error');
}
});
}
servlet 在下面。
@WebServlet("/Servlet/HesaplamaIslemleri")
public class HesaplamaIslemleri extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out = resp.getWriter();
StringBuilder sb = new StringBuilder();
BufferedReader br = req.getReader();
String str;
while( (str = br.readLine()) != null ){
sb.append(str);
}
System.out.println(sb.toString());
resp.getWriter().print(sb.toString());
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
doPost(req,resp);
}
}
当我单击该按钮时，一个新页面正在加载，页面中有一些值及其名称。
像这样 grupNoTutan=1_hesaplaButon&1_kokDerecesi_1=2&1_kokKatsayi_1=4&1_kokIciDeger_1=2&1_kokDerecesi_2=2&1_kokKatsayi_2=8&1_kokIciDeger_2 =2&1_sonuc=&1_hesaplaButon=
有人能帮忙吗？
首先，您对 HTTP 资源发出的 POST 请求不是 AJAX。如果你想异步发起HTTP请求，获取响应并写入DOM而不刷新整个页面，请先查看经典XmlHttpRequest并研究其他方法。在高层次上，您的任务将是这样的，
在JavaScript中构建UI部分，如果你想做一些动态的事情。
对于静态部分，使用单独的 CSS 文件并将您的样式移动到其中。不要在 JavaScript 中创建所有 HTML 元素和 CSS 样式，除非您需要所有内容都是动态的。
从您的服务器端了解您想要return的内容。
是否要直接从服务器端 return 格式化 HTML？或者 return 格式如 JSON 或 XML 的数据，并在客户端中获取 returned AJAX 响应并操作 DOM （在你的例如 'result' 文本框）。
我就是这样解决问题的。 Servlet 和 javascript 代码如下。首先，我将 json 数据分解为多个部分以了解结构。然后，我根据哪部分是数组，哪部分是对象来处理数据。 （动态创建的元素序列号存储在名为（'grupNoTutan'）
的隐藏元素中
Javascript:
//Read the content of elements that created dynamically
var butonAdi= document.getElementById("grupNoTutan").value;
var grup_no = butonAdi.charAt(0);
var i = 1;
var birinciKokDerecesi;
var birinciKatsayi;
var birinciKokIciDeger;
var ikinciKokDerecesi;
var ikinciKatsayi;
var ikinciKokIciDeger;
var sonuc;
var operator = document.getElementById("operator").textContent;
//var url = "#" + grup_no + "_kokDerecesi_" + i
//var textboxvalue = $("'" + url + "'").val();
var birKokD = grup_no + "_kokDerecesi_" + i;
var birKokK = grup_no + "_kokKatsayi_" + i;
var birKokID = grup_no + "_kokIciDeger_" + i;
birinciKokDerecesi = document.getElementById(grup_no + "_kokDerecesi_" + i).value;
birinciKatsayi = document.getElementById(grup_no + "_kokKatsayi_" + i).value;
birinciKokIciDeger = document.getElementById(grup_no + "_kokIciDeger_" + i).value;
sonuc = document.getElementById(grup_no + "_sonuc");
i= i + 1;
var ikiKokD = grup_no + "_kokDerecesi_" + i;
var ikiKokK = grup_no + "_kokKatsayi_" + i;
var ikiKokID = grup_no + "_kokIciDeger_" + i;
ikinciKokDerecesi = document.getElementById(grup_no + "_kokDerecesi_" + i).value;
ikinciKatsayi = document.getElementById(grup_no + "_kokKatsayi_" + i).value;
ikinciKokIciDeger = document.getElementById(grup_no + "_kokIciDeger_" + i).value;
i = 1;
//send request to server
let url = '/TYT_Mat_Soru_Cozumu_Java_war_exploded/Servlet/HesaplamaIslemleri';
let xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencode");
var data;
data = JSON.stringify({
"birinci":[{
birKokD: birinciKokDerecesi,
birKokK: birinciKatsayi,
birKokID: birinciKokIciDeger}],
"ikinci":[{
ikiKokD: ikinciKokDerecesi,
ikiKokK: ikinciKatsayi,
ikiKokID: ikinciKokIciDeger
}],"operator": operator
});
xhr.send(data);
xhr.onload = function(){
sonuc.readOnly = true
sonuc.value = xhr.responseText;
}
Servlet 代码：
// Business Logic
KokluSayiIslemleriImpl business = new KokluSayiIslemleriImpl();
// Reading Request Header
StringWriter writer = new StringWriter();
StringBuilder buffer = new StringBuilder();
BufferedReader reader = req.getReader();
String line;
while ((line = reader.readLine()) != null) {
buffer.append(line);
}
String data = buffer.toString();
JSONObject jsonObj = new JSONObject(new String(data));
// Creating the first object with data that getting from header
JSONArray birinci = new JSONArray();
birinci.put(jsonObj.get("birinci"));
JSONObject birinciSayi = birinci.getJSONArray(0).getJSONObject(0);
int kokDerecesi_1 = Integer.parseInt(birinciSayi.getString("birKokD"));
double kokIciDeger_1 = Double.parseDouble(birinciSayi.getString("birKokID"));
int kokKatsayi_1 = Integer.parseInt(birinciSayi.getString("birKokK"));
KokluSayi koklusayi_1 = new KokluSayi(kokDerecesi_1,kokIciDeger_1,kokKatsayi_1);
// Veri Sırası Test
System.out.println(koklusayi_1.getKokDerecesi() + " / " + koklusayi_1.getKatsayi() + " / " + koklusayi_1.getKokIciDeger());
// Creating the second object with data that getting from header
JSONArray ikinci = new JSONArray();
ikinci.put(jsonObj.get("ikinci"));
JSONObject ikinciSayi = ikinci.getJSONArray(0).getJSONObject(0);
int kokDerecesi_2 = Integer.parseInt(ikinciSayi.getString("ikiKokD"));
double kokIciDeger_2 = Double.parseDouble(ikinciSayi.getString("ikiKokID"));
int kokKatsayi_2 = Integer.parseInt(ikinciSayi.getString("ikiKokK"));
KokluSayi koklusayi_2 = new KokluSayi(kokDerecesi_2,kokIciDeger_2,kokKatsayi_2);
// Veri Sırası Test
System.out.println(koklusayi_2.getKokDerecesi() + " / " + koklusayi_2.getKatsayi() + " / " + koklusayi_2.getKokIciDeger());
// Getting the operator(which operation will processing)
char operator = jsonObj.getString("operator").charAt(0);
KokluSayi sonuc = business.dortIslem(koklusayi_1,koklusayi_2,operator);
//send result back to client
resp.getWriter().write("D :" + sonuc.getKokDerecesi() + " - " + "K :" + sonuc.getKatsayi() + " - " + "D :" + sonuc.getKokIciDeger());
编辑：添加创建动态代码部分的元素的阅读内容
我有一个网页和一个 servlet。我在网页中使用 javascript 动态创建输入元素。 servlet 是评估一些数学计算的后端。我正在从动态创建的输入元素中获取要发送到 servlet 的数据。这些输入元素 id 也是动态创建的。我能够毫无错误地检索数据和创建元素。
但是，我想在 servlet 中评估一些数学运算，然后将结果发送到网页中的 'result' 文本框。所以我不想刷新网页。因为 'result' id 文本框也在动态创建。
相关html代码。
<form action="/TYT_Mat_Soru_Cozumu_Java_war_exploded/Servlet/HesaplamaIslemleri" method="post" id="sayilarForm">
<input type="hidden" name="grupNoTutan" id="grupNoTutan"></input>
</form>
动态创建输入元素的代码。
function sayiEklemeKutular(operatorTipi){
var satir_1Div = document.createElement("div");
satir_1Div.setAttribute("class", "row");
satir_1Div.setAttribute("id", grup_no + "_satir_1");
var satir_2Div = document.createElement("div");
satir_2Div.setAttribute("class", "row");
var satir_3Div = document.createElement("div");
satir_3Div.setAttribute("class", "row");
var satir_4Div = document.createElement("div");
satir_4Div.setAttribute("class", "row");
var satir_5Div = document.createElement("div");
satir_5Div.setAttribute("class", "row");
var node = "";
switch (operatorTipi) {
case "+":
node = document.createTextNode('+');
break;
case "-":
node = document.createTextNode('-');
break;
case "*":
node = document.createTextNode('*');
break;
case "/":
node = document.createTextNode('/');
break;
case "√":
node = document.createTextNode('√');
break;
case "0/":
node = document.createTextNode('0/');
break;
case "^√==":
node = document.createTextNode('^√==');
break;
case "^==":
node = document.createTextNode('^==');
break;
default:
node = document.createTextNode('Hata');
}
satir_3Div.appendChild(node);
satir_3Div.style.textAlign = "center";
satir_3Div.style.fontSize = "14pt";
satir_3Div.style.fontColor = "#ffffff";
var satir_2_sutun_1Div = document.createElement("div");
var satir_2_sutun_2Div = document.createElement("div");
var satir_2_sutun_3Div = document.createElement("div");
satir_2_sutun_1Div.setAttribute("class", "col");
satir_2_sutun_2Div.setAttribute("class", "col");
satir_2_sutun_3Div.setAttribute("class", "col");
var satir_4_sutun_1Div = document.createElement("div");
var satir_4_sutun_2Div = document.createElement("div");
var satir_4_sutun_3Div = document.createElement("div");
satir_4_sutun_1Div.setAttribute("class", "col");
satir_4_sutun_2Div.setAttribute("class", "col");
satir_4_sutun_3Div.setAttribute("class", "col");
var satir_5_sutun_1Div = document.createElement("div");
var satir_5_sutun_2Div = document.createElement("div");
var satir_5_sutun_3Div = document.createElement("div");
satir_5_sutun_1Div.setAttribute("class", "col");
satir_5_sutun_2Div.setAttribute("class", "col");
satir_5_sutun_3Div.setAttribute("class", "col");
var kokDerece1 = document.createElement("input");
var kokKatsayi1 = document.createElement("input");
var kokIciDeger1 = document.createElement("input");
kokDerece1.setAttribute("name", grup_no + "_kokDerecesi_" + komponent_no);
kokDerece1.setAttribute("id", grup_no + "_kokDerecesi_" + komponent_no);
kokDerece1.setAttribute("class", "form-control");
kokDerece1.setAttribute("type", "text");
kokDerece1.setAttribute("placeholder", "Kökün Derecesi");
kokIciDeger1.setAttribute("name", grup_no + "_kokIciDeger_" + komponent_no);
kokIciDeger1.setAttribute("id", grup_no + "_kokIciDeger_" + komponent_no);
kokIciDeger1.setAttribute("class", "form-control");
kokIciDeger1.setAttribute("type", "text");
kokIciDeger1.setAttribute("placeholder", "Kök İçindeki Değer");
kokKatsayi1.setAttribute("name", grup_no + "_kokKatsayi_" + komponent_no);
kokKatsayi1.setAttribute("id", grup_no + "_kokKatsayi_"+ komponent_no);
kokKatsayi1.setAttribute("class", "form-control");
kokKatsayi1.setAttribute("type", "text");
kokKatsayi1.setAttribute("placeholder", "Kökün Katsayısı");
komponent_no = komponent_no + 1;
var kokDerece2 = document.createElement("input");
var kokIciDeger2 = document.createElement("input");
var kokKatsayi2 = document.createElement("input");
kokDerece2.setAttribute("name", grup_no + "_kokDerecesi_" + komponent_no);
kokDerece2.setAttribute("type","text");
kokDerece2.setAttribute("id", grup_no + "_kokDerecesi_" + komponent_no);
kokDerece2.setAttribute("class", "form-control");
kokDerece2.setAttribute("placeholder", "Kökün Derecesi");
kokIciDeger2.setAttribute("name", grup_no + "_kokIciDeger_" + komponent_no);
kokIciDeger2.setAttribute("type", "text");
kokIciDeger2.setAttribute("id", grup_no + "_kokIciDeger_" + komponent_no);
kokIciDeger2.setAttribute("class", "form-control");
kokIciDeger2.setAttribute("placeholder", "Kök İçindeki Değer");
kokKatsayi2.setAttribute("name", grup_no + "_kokKatsayi_" + komponent_no);
kokKatsayi2.setAttribute("type","text");
kokKatsayi2.setAttribute("id", grup_no + "_kokKatsayi_"+ komponent_no);
kokKatsayi2.setAttribute("class", "form-control");
kokKatsayi2.setAttribute("placeholder", "Kökün Katsayısı");
var sonucInput = document.createElement("INPUT");
sonucInput.setAttribute("class", "form-control");
sonucInput.setAttribute("name", grup_no + "_sonuc");
sonucInput.setAttribute("id", grup_no + "_sonuc");
sonucInput.setAttribute("placeholder", "Sonuç");
var silButon = document.createElement("BUTTON");
silButon.setAttribute("class", "btn btn-danger");
silButon.setAttribute("name", grup_no + "_silButon");
silButon.textContent = "Grubu Sil";
silButon.setAttribute("onclick", 'silButonununGrupNosunuGetir(this.getAttribute("name"))');
var hesaplaButon = document.createElement("BUTTON");
hesaplaButon.setAttribute("class", "btn btn-success");
hesaplaButon.setAttribute("type", "submit");
hesaplaButon.setAttribute("name", grup_no + "_hesaplaButon");
hesaplaButon.setAttribute("onclick", 'ismiHiddenaEkle(this.getAttribute("name"))');
hesaplaButon.textContent = "Hesapla";
komponent_no = 1;
grup_no = grup_no + 1;
satir_2_sutun_1Div.appendChild(kokDerece1);
satir_2_sutun_2Div.appendChild(kokKatsayi1);
satir_2_sutun_3Div.appendChild(kokIciDeger1);
satir_2Div.appendChild(satir_2_sutun_1Div);
satir_2Div.appendChild(satir_2_sutun_2Div);
satir_2Div.appendChild(satir_2_sutun_3Div);
satir_4_sutun_1Div.appendChild(kokDerece2);
satir_4_sutun_2Div.appendChild(kokKatsayi2);
satir_4_sutun_3Div.appendChild(kokIciDeger2);
satir_4Div.appendChild(satir_4_sutun_1Div);
satir_4Div.appendChild(satir_4_sutun_2Div);
satir_4Div.appendChild(satir_4_sutun_3Div);
satir_5_sutun_1Div.appendChild(sonucInput);
satir_5_sutun_2Div.appendChild(silButon);
satir_5_sutun_3Div.appendChild(hesaplaButon);
satir_5Div.appendChild(satir_5_sutun_1Div);
satir_5Div.appendChild(satir_5_sutun_2Div);
satir_5Div.appendChild(satir_5_sutun_3Div);
satir_1Div.appendChild(satir_2Div);
satir_1Div.appendChild(satir_3Div);
satir_1Div.appendChild(satir_4Div);
satir_1Div.appendChild(satir_5Div);
satir_1Div.style.marginTop = '30px';
satir_3Div.style.marginTop = '10px';
satir_4Div.style.marginTop = '10px';
satir_5Div.style.marginTop = '10px';
satir_1Div.style.backgroundColor = "#18A2D9";
satir_1Div.style.padding = "10px";
satir_1Div.style.borderRadius = "2em";
var formId = document.getElementById("sayilarForm");
formId.appendChild(satir_1Div);
}
The code that add sequence number of created dynamically element to a hidden element and calling the Ajax code.
function ismiHiddenaEkle(name){
var hiddenEleman = document.getElementById("grupNoTutan");
hiddenEleman.value = name;
hesaplaServleteGonder();
}
The Javascript code that contain Ajax.
function hesaplaServleteGonder(){
var butonAdi= document.getElementById("grupNoTutan").value;
var grup_no = butonAdi.charAt(0);
var i = 1;
var birinciKokDerecesi;
var birinciKatsayi;
var birinciKokIciDeger;
var ikinciKokDerecesi;
var ikinciKatsayi;
var ikinciKokIciDeger;
var sonuc;
birinciKokDerecesi = document.getElementById(grup_no + "_kokDerecesi_" + i).value;
birinciKatsayi = document.getElementById(grup_no + "_kokKatsayi_" + i).value;
birinciKokIciDeger = document.getElementById(grup_no + "_kokIciDeger_" + i).value;
sonuc = document.getElementById(grup_no + "_sonuc");
i= i + 1;
ikinciKokDerecesi = document.getElementById(grup_no + "_kokDerecesi_" + i).value;
ikinciKatsayi = document.getElementById(grup_no + "_kokKatsayi_" + i).value;
ikinciKokIciDeger = document.getElementById(grup_no + "_kokIciDeger_" + i).value;
i = 1;
$.ajax({
type:'POST',
url:'/TYT_Mat_Soru_Cozumu_Java_war_exploded/Servlet/HesaplamaIslemleri',
dataType: 'json',
contentType:'application/json',
data: $('#sayilarForm').serialize() ,
cache:false,
success:function(data){
alert(data);
$('#sonuc').text(responseText);
},
error:function(){
alert('error');
}
});
}
servlet 在下面。
@WebServlet("/Servlet/HesaplamaIslemleri")
public class HesaplamaIslemleri extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter out = resp.getWriter();
StringBuilder sb = new StringBuilder();
BufferedReader br = req.getReader();
String str;
while( (str = br.readLine()) != null ){
sb.append(str);
}
System.out.println(sb.toString());
resp.getWriter().print(sb.toString());
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
doPost(req,resp);
}
}
当我单击该按钮时，一个新页面正在加载，页面中有一些值及其名称。 像这样 grupNoTutan=1_hesaplaButon&1_kokDerecesi_1=2&1_kokKatsayi_1=4&1_kokIciDeger_1=2&1_kokDerecesi_2=2&1_kokKatsayi_2=8&1_kokIciDeger_2 =2&1_sonuc=&1_hesaplaButon=
有人能帮忙吗？
首先，您对 HTTP 资源发出的 POST 请求不是 AJAX。如果你想异步发起HTTP请求，获取响应并写入DOM而不刷新整个页面，请先查看经典XmlHttpRequest并研究其他方法。在高层次上，您的任务将是这样的，
在JavaScript中构建UI部分，如果你想做一些动态的事情。
对于静态部分，使用单独的 CSS 文件并将您的样式移动到其中。不要在 JavaScript 中创建所有 HTML 元素和 CSS 样式，除非您需要所有内容都是动态的。
从您的服务器端了解您想要return的内容。
是否要直接从服务器端 return 格式化 HTML？或者 return 格式如 JSON 或 XML 的数据，并在客户端中获取 returned AJAX 响应并操作 DOM （在你的例如 'result' 文本框）。
我就是这样解决问题的。 Servlet 和 javascript 代码如下。首先，我将 json 数据分解为多个部分以了解结构。然后，我根据哪部分是数组，哪部分是对象来处理数据。 （动态创建的元素序列号存储在名为（'grupNoTutan'）
的隐藏元素中Javascript:
//Read the content of elements that created dynamically
var butonAdi= document.getElementById("grupNoTutan").value;
var grup_no = butonAdi.charAt(0);
var i = 1;
var birinciKokDerecesi;
var birinciKatsayi;
var birinciKokIciDeger;
var ikinciKokDerecesi;
var ikinciKatsayi;
var ikinciKokIciDeger;
var sonuc;
var operator = document.getElementById("operator").textContent;
//var url = "#" + grup_no + "_kokDerecesi_" + i
//var textboxvalue = $("'" + url + "'").val();
var birKokD = grup_no + "_kokDerecesi_" + i;
var birKokK = grup_no + "_kokKatsayi_" + i;
var birKokID = grup_no + "_kokIciDeger_" + i;
birinciKokDerecesi = document.getElementById(grup_no + "_kokDerecesi_" + i).value;
birinciKatsayi = document.getElementById(grup_no + "_kokKatsayi_" + i).value;
birinciKokIciDeger = document.getElementById(grup_no + "_kokIciDeger_" + i).value;
sonuc = document.getElementById(grup_no + "_sonuc");
i= i + 1;
var ikiKokD = grup_no + "_kokDerecesi_" + i;
var ikiKokK = grup_no + "_kokKatsayi_" + i;
var ikiKokID = grup_no + "_kokIciDeger_" + i;
ikinciKokDerecesi = document.getElementById(grup_no + "_kokDerecesi_" + i).value;
ikinciKatsayi = document.getElementById(grup_no + "_kokKatsayi_" + i).value;
ikinciKokIciDeger = document.getElementById(grup_no + "_kokIciDeger_" + i).value;
i = 1;
//send request to server
let url = '/TYT_Mat_Soru_Cozumu_Java_war_exploded/Servlet/HesaplamaIslemleri';
let xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencode");
var data;
data = JSON.stringify({
"birinci":[{
birKokD: birinciKokDerecesi,
birKokK: birinciKatsayi,
birKokID: birinciKokIciDeger}],
"ikinci":[{
ikiKokD: ikinciKokDerecesi,
ikiKokK: ikinciKatsayi,
ikiKokID: ikinciKokIciDeger
}],"operator": operator
});
xhr.send(data);
xhr.onload = function(){
sonuc.readOnly = true
sonuc.value = xhr.responseText;
}
Servlet 代码：
// Business Logic
KokluSayiIslemleriImpl business = new KokluSayiIslemleriImpl();
// Reading Request Header
StringWriter writer = new StringWriter();
StringBuilder buffer = new StringBuilder();
BufferedReader reader = req.getReader();
String line;
while ((line = reader.readLine()) != null) {
buffer.append(line);
}
String data = buffer.toString();
JSONObject jsonObj = new JSONObject(new String(data));
// Creating the first object with data that getting from header
JSONArray birinci = new JSONArray();
birinci.put(jsonObj.get("birinci"));
JSONObject birinciSayi = birinci.getJSONArray(0).getJSONObject(0);
int kokDerecesi_1 = Integer.parseInt(birinciSayi.getString("birKokD"));
double kokIciDeger_1 = Double.parseDouble(birinciSayi.getString("birKokID"));
int kokKatsayi_1 = Integer.parseInt(birinciSayi.getString("birKokK"));
KokluSayi koklusayi_1 = new KokluSayi(kokDerecesi_1,kokIciDeger_1,kokKatsayi_1);
// Veri Sırası Test
System.out.println(koklusayi_1.getKokDerecesi() + " / " + koklusayi_1.getKatsayi() + " / " + koklusayi_1.getKokIciDeger());
// Creating the second object with data that getting from header
JSONArray ikinci = new JSONArray();
ikinci.put(jsonObj.get("ikinci"));
JSONObject ikinciSayi = ikinci.getJSONArray(0).getJSONObject(0);
int kokDerecesi_2 = Integer.parseInt(ikinciSayi.getString("ikiKokD"));
double kokIciDeger_2 = Double.parseDouble(ikinciSayi.getString("ikiKokID"));
int kokKatsayi_2 = Integer.parseInt(ikinciSayi.getString("ikiKokK"));
KokluSayi koklusayi_2 = new KokluSayi(kokDerecesi_2,kokIciDeger_2,kokKatsayi_2);
// Veri Sırası Test
System.out.println(koklusayi_2.getKokDerecesi() + " / " + koklusayi_2.getKatsayi() + " / " + koklusayi_2.getKokIciDeger());
// Getting the operator(which operation will processing)
char operator = jsonObj.getString("operator").charAt(0);
KokluSayi sonuc = business.dortIslem(koklusayi_1,koklusayi_2,operator);
//send result back to client
resp.getWriter().write("D :" + sonuc.getKokDerecesi() + " - " + "K :" + sonuc.getKatsayi() + " - " + "D :" + sonuc.getKokIciDeger());
编辑：添加创建动态代码部分的元素的阅读内容