Question

这里我试图通过jquery提交表单请求，但我不知道为什么我无法这样做只是执行代码并且我的控制台上没有任何内容。当我尝试通过表单操作正常提交表单时它是成功的。感谢所有人的帮助。

Jquery＆amp; jsp表格：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1" import="java.util.List,beans.Country,mainclasses.CountryListing" errorPage=""%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Post a property</title>
<jsp:useBean id="CNY" class="beans.Country" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="js/combochange.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#contact_details_submit").click(function() {

       var companyname = $("#company_name").val();
       var officeaddress = $("#office_address").val();
       var countryname = $("#country_name option:selected").val();
       var statename = $("#state_name option:selected").val();
       var cityname = $("#city_name option:selected").val();
       var mobile_num = $("#mobilenum").val();
       alert(companyname+" : "+officeaddress);
        $.get("conatctDetailsInsert.jsp",
        {
        company_name : companyname,
        office_address:officeaddress,
        country_name:countryname,
        state_name:statename,
        city_name:cityname,
        mobilenum:mobile_num} ,function(data){
            alert(data);        
      });//end get         
     });
    });

</script>
</head>
<body>
<form action="">

<table cellpadding="0" cellspacing="0" border="1" width="500">
<tbody id="contact_details">
<tr>
<td>i am a 
<select>
<option>Agent/broker</option>
<option>Builder/Pvt.Ltd company</option>
</select>  
 </td>
</tr>
<tr>
<td><h3>Contact Details</h3></td></tr>
<tr>
<td>
Company Name:<input type="text" value="" id="company_name" name="company_name"/>
</td></tr>
<tr>
<td>Office Address:<input type="text" value="" id="office_address" name="office_address"/><br>
Country:
<select id="country_name" name="country_name">
<option>-Select-</option>
<%
mainclasses.CountryListing  CNY_CL = new mainclasses.CountryListing(); 

List<Country> CNY_List=CNY_CL.getCountry();
for(int i=0; i < CNY_List.size(); i++ ){
CNY=(beans.Country)CNY_List.get(i);
%>



<option value="<%=CNY.getIdCountry() %>"><%=CNY.getCountryName() %></option>

<%} %>
</select><br>

State:<select id="state_name" name="state_name"><option></option></select><br>
City:<select id="city_name" name="city_name"><option></option></select><br>
</td>
</tr>
<tr>
<td>
Contact Number:
<input type="tel" id="mobilenum" value="" name="mobilenum"/>
</td>
</tr>
<tr>
<td>
<input type="submit" id="contact_details_submit" name="contact_details_submit"/>
</td>
</tr>
</tbody>

</table>
</form>
</body>
</html>

请求处理jsp：

<%@page import="beans.ConatctDetailsService"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<%boolean x=false;
String company_name =request.getParameter("company_name");
String office_address =request.getParameter("office_address");
String country_name =request.getParameter("country_name");
String state_name =request.getParameter("state_name");
String city_name =request.getParameter("city_name");
String mobilenum =request.getParameter("mobilenum");
beans.ConatctDetailsService CTD = new beans.ConatctDetailsService();
CTD.setCompanyName(company_name);
CTD.setCompanyName(office_address);
CTD.setIdCountry(country_name);
CTD.setIdState(state_name);
CTD.setCity(city_name);
CTD.setMobNum(mobilenum);
x=CTD.insert();
System.out.println(x);
CTD.geterror();
if(x){
    out.println("done");
}
else{
    out.println("no");
}
%>

Answer 1

尝试在表单标记中添加ID，例如

<form id='myForm'>

并更改为表单提交。

$(document).ready(function(){
$("#myForm").on('submit', function(e) {
e.preventDefault();

Answer 2

尝试使用AJAX请求来检查发生了什么：

$.ajax({
  type:'GET',
  url: 'conatctDetailsInsert.jsp',
  data: {company_name : companyname,
        office_address:officeaddress,
        country_name:countryname,
        state_name:statename,
        city_name:cityname,
        mobilenum:mobile_num},
  success: function(data) {
   console.log(data); 
  }, error: function(jqXHR, textStatus, errorThrown) {
   console.log(err); 
  }
});

Answer 3

我会这样做，更清洁。

$("form").submit(function(e) {

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

    $.get("conatctDetailsInsert.jsp",formData, function(data){
        alert(data);        
    });//end get      

    return false;   
 });

通过jquery提交表单

3 个答案: