从JSP调用JavaScript_Javascript_Java_Jsp

从JSP调用JavaScript

javascript java jsp

从JSP调用JavaScript,javascript,java,jsp,Javascript,Java,Jsp,我有一个sellhouse.jsp，我试图从用户那里获取值，即名称和地址，并将其插入数据库。在将这些值插入数据库之前，我试图调用JavaScript来获取用户输入地址的地理代码。但是，在我提交表单之前，脚本会被执行。但我希望在单击submit按钮后执行脚本。除此之外，我希望将地理代码传递给jsp元素这是sellhouse.jsp <%@page import="java.sql.ResultSet"%> <%@page import="javax.swing.JOptionP

我有一个sellhouse.jsp，我试图从用户那里获取值，即名称和地址，并将其插入数据库。在将这些值插入数据库之前，我试图调用JavaScript来获取用户输入地址的地理代码。但是，在我提交表单之前，脚本会被执行。但我希望在单击submit按钮后执行脚本。除此之外，我希望将地理代码传递给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" >


销售页
你好，世界！
姓名：
地址1：
地址2：
城市：
声明：
国家：
邮编：
函数initMap（）{
//var map=new google.maps.map（document.getElementById（'map'）{
//缩放：8，
//中心：{纬度：-34.397，液化天然气：150.644}
//});
var geocoder=new google.maps.geocoder（）；
document.getElementById（'submit'）。addEventListener（'click'，function（）{
地理编码地址；
});
}
功能geocodeAddress（地理编码器）{
//var address=document.getElementById（'address'）。值；
//var address=request.getParameter（“FirstName”）；
var地址=；
//警报（地址）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
警惕（“完成”）；
resultsMap.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：结果地图，
位置：结果[0]。几何体。位置
});
警报（结果[0]。几何体。位置）；
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}

我认为您不需要在

提交按钮中再次添加EventListener

。您所能做的就是将

event.preventDefault

添加到submit函数中。或者，您可以将按钮类型更改为

按钮

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

我认为您不需要在

提交

按钮中再次添加EventListener。您所能做的就是将

event.preventDefault

添加到submit函数中。或者，您可以将按钮类型更改为

按钮

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