Question

以下形式成功将数据发送到MySQL db。但无法在div <div id="ajaxGetUserServletResponse"></div>中显示responseText。如何获取响应？

<form id="form-id" class="ajaxform" action="register.jsp">
<label>First Name </label>
<input type="text" name="userName" />
<label>Password </label>
<input type="password" name="password" />

<input type="submit" name="submit" value="submit" />
</form>

<br>
<br>

<strong>Ajax Response</strong>:
<div id="ajaxGetUserServletResponse"></div>

js文件：

$(document).ready(function(){
$(".ajaxform").bind("submit",function(e){

e.preventDefault();

var ajaxurl = $(this).attr("action");

var data = $(this).serialize();

$.post(ajaxurl,data,function(responseText) {
          $('#ajaxGetUserServletResponse').text(responseText);
},'json');
});

Answer 1

对于面临相同问题的任何人，这是我所做的更改，我提供了两种单独的方法：

register.html

更改： 使用类型按钮添加了一个输入字段，并调用了函数onclick="saveUserInfo()"

<body>
<form id="form-id" class="ajaxform" action="register.jsp">

    <label>First Name </label>

    <input id="userName" type="text" name="userName" />

    <input id="password" type="text" name="password" />

    <input type="submit" name="submit" value="submit" />
    <input type="button" id="button" value="SEND via AJAX" onclick="saveUserInfo()">


</form>

<br>
<br>

<strong>Ajax Response</strong>:
<div id="ajaxGetUserServletResponse"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
</script>
<script src="js/script.js"></script>
</body>

script.js

用户单击<input type="submit" name="submit" value="submit" />

$(document).ready(function(){
try {
$(".ajaxform").bind("submit",function(e){

e.preventDefault();

var ajaxurl = $(this).attr("action");

var data = $(this).serialize();

$.post(ajaxurl,data,function(responseText) {
$('#ajaxGetUserServletResponse').html(responseText)
});
});
} catch(e) {
alert("You messed something up!");
}
});

我也尝试过这种方式

script.js

当用户点击时， <input type="button" id="button" value="SEND via AJAX" onclick="saveUserInfo()">

function saveUserInfo(){
var username = document.getElementById("userName").value;
var password = document.getElementById("password").value;

var vars = "userName="+username+"&password="+password;

$.ajax({
url: 'register.jsp',
type: 'POST',
data: vars,
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
}

这也是 register.jsp 页面以获取更多参考。

<body>

<%@ page import ="java.sql.*" %>
<%@ page import ="javax.sql.*" %>


<%

String username = request.getParameter("userName");
String password = request.getParameter("password");
    if(username == null || "".equals(username)){
            username = "Guest";
        }

    String greetings = "Hello, " + username +"." +" Your Password is : "  +password + 
    ".";

    response.setContentType("text/plain");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(greetings);


Class.forName("com.mysql.jdbc.Driver");

Connection con = 
DriverManager.getConnection("jdbc:mysql://localhost:3306/user_info4","root","root");

Statement st = con.createStatement();
ResultSet rs;

int i=st.executeUpdate("INSERT INTO `new table`(username, password) VALUE 
('"+username+"','"+password+"')");
 %>

</body>

Ajax ResponseText不退格

1 个答案: