从JSP调用JavaScript

时间:2016-07-09 03:51:27

标签: javascript java jsp

我有一个sellhouse.jsp,我正在尝试从用户获取值,即名称和地址,并将其插入数据库。在将值插入数据库之前,我正在尝试调用JavaScript以获取用户输入的地址的地理编码。但是,在我提交表单之前,脚本会被执行。但是我想在我点击提交按钮后执行脚本。除此之外,我希望将地理编码传递给jsp元素。

这是sellhouse.jsp

<%@page import="java.sql.ResultSet"%>
<%@page import="javax.swing.JOptionPane"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sell Page</title>
    </head>
<body>
    <h1>Hello World!</h1>
    <form action="sellHouse.jsp" method="POST">
        Name: <input type="text" name="Name" value="" placeholder="please Enter your Name" />
        Address1: <input type="text" name="Address1" value="" placeholder="please Enter your Name" />
        Address2: <input type="text" name="Address2" value="" placeholder="please Enter your Name" />
        City: <input type="text" name="City" value="" placeholder="please Enter your Name" />
        State: <input type="text" name="State" value="" placeholder="please Enter your Name" />
        Country: <input type="text" name="Country" value="" placeholder="please Enter your Name" />
        Zip: <input type="text" name="Zip" value="" placeholder="please Enter your Name" />
        <input type="submit" value="submit" name="Submit" />
    </form>
    <%
        try
        {
        String name = request.getParameter("Name");
        String addr1 = request.getParameter("Address1");
        String addr2 = request.getParameter("Address2");
        String City = request.getParameter("City");
        String State = request.getParameter("State");
        String country = request.getParameter("Country");
        String zip = request.getParameter("Zip");
        String geocoderadd = name + addr1 + addr2 + City + State + country + zip;
 %>
 <script>
  function initMap() {
    //var map = new google.maps.Map(document.getElementById('map'), {
      //zoom: 8,
      //center: {lat: -34.397, lng: 150.644}
    //});
    var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click', function() {
     geocodeAddress(geocoder);
   });

  }

  function geocodeAddress(geocoder) {
    //var address = document.getElementById('address').value;
    //var address = request.getParameter("FirstName");
    var address = <%=geocoderadd%>;
    //alert(address);
    geocoder.geocode({'address': address}, function(results, status) {

      if (status === google.maps.GeocoderStatus.OK) {
          alert("Done");
        resultsMap.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: resultsMap,
          position: results[0].geometry.location
        });
        alert(results[0].geometry.location);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

   </script>
<script async defer
 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDubMBIwomXLLoL2ueDx1tb1ErpsuxnWrE&v=3&callback=initMap" >
   
</script>
    <%
           int latitude ;
        int longitude ;
        if(name!=null){
        Class.forName("oracle.jdbc.OracleDriver");
        out.println("fkjngskldfng");
        Connection con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "OHMS", "OHMS");
        Statement st = con.createStatement();
        st.executeUpdate("INSERT INTO SELLHOUSE VALUES('" + name + "','" + addr1 + "','" + addr2 + "','" + City + "','" + State + "','" + country + "','" + zip + "','" + latitude + "','" + longitude + "')");
        if (st != null) {
            JOptionPane.showMessageDialog(null, "Registered Successfully");
            //session=request.getSession();
            //session.setAttribute("userName", userName);
            response.sendRedirect("index.html");
        }
        }
        }catch(Exception e){
         JOptionPane.showMessageDialog(null, e.getMessage());   
        }
    %>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

我认为您不必再​​次addEventlistenersubmit按钮。 您所能做的就是将event.preventDefault添加到提交功能。或者您可以将按钮类型更改为button

// if button type is submit
document.forms["someFormName"].onsubmit = function(){
  var geocoder = new google.maps.Geocoder();
  geocodeAddress(geocoder);
}