TIL 2021.09.27(月)JAVASSCRIPT(AJAX)とDB INSERT
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="functions"
uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Ajax Form Insert</h2>
<form enctype="application/x-www-form-urlencoded" name="frm" id="frm">
<div class="form-group">
<label for="name">Name:</label> <input type="text"
class="form-control" id="name" name="name"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="email">Email:</label> <input type="email"
class="form-control" id="email" name="email"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label> <input type="password"
class="form-control" id="pwd" name="pwd"
placeholder="Enter password">
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
</div>
<table>
<thead>
<tr>
<th>NO</th>
<th>NAME</th>
<th>EMAIL</th>
<th>PWD</th>
<th>REGDATE</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
<script type="text/javascript">
function sendAjax(){
$.ajax({
url:'/web/ajaxInsert.do?cmd=ajaxInsert',
type:'POST',
contentType:'application/x-www-form-urlencoded;charset=UTF-8',
dataType:'json',
//data:{name:$("input#name").val(), email:$("input#email").val(), pwd:$("input#pwd").val()},
data:$("form#frm").serialize(),
success : function(result) {
console.log(result);
$(result).each(function(index,dom){
var tr=document.createElement("tr");
for(var j in dom){
var td=document.createElement("td");
td.appendChild(document.createTextNode(dom[j]));
tr.appendChild(td);
}//for
document.getElementById("tb").appendChild(tr);
});
}
});
}
$(function(){
$("button").click(function(){
sendAjax();
});
});
</script>
</html>ajaxのsuccess:function(result)のresultはなぜajaxEx 8 Dateなのか.jspの値が入ってきたかどうか知りたいのですが、検索してみましたが、通信が成功すればAjaxInjectのrequestです.setAttribute("AjaxList", AjaxDao.getMyBatisDao().selectAjax()); 口授で値段をつける.
[
<c:forEach var="i" items="${AjaxList}" varStatus="cnt">
{"no":${i.no},
"name":"${i.name}",
"email":"${i.email}",
"pwd":"${i.pwd}",
"regdate":"${i.regdate}"
}
<c:choose>
<c:when test="${fn:length(AjaxList)!=cnt.count}">,</c:when>
</c:choose>
</c:forEach>
]AJAXメソッド
Reference
この問題について(TIL 2021.09.27(月)JAVASSCRIPT(AJAX)とDB INSERT), 我々は、より多くの情報をここで見つけました https://velog.io/@moodnightsummer/TIL2021.09.27월-JAVASCRIPTAJAX-and-DB-INSERTテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol