2016-03-28 16 views
0

ページをリロードせずにデータベースから値を取得する方法を知りたいと思います。私はちょうど少しjavascriptを知って、私はdata source jndi私のデータベースのために使用しています。私は現在、MVC2モデルに従っています。JSPページを再ロードせずにデータベースから値を取得する方法

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<%@page import = "java.sql.*" %> 
<%@page import = "javax.sql.*" %> 
<!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=UTF-8"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("button").click(function() { 
      $("#users").change(function(){ //A function to execute each time the event is triggered. 
       var value = $(this).val(); //allows you to pass an array of element values 
       $.get("index.jsp",{q:value},function(data){ 
        $("#javaquery").html(data); 
       }); 
      }); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <div id="users"> 
     <button value="1">1</button> 
     <button value="2">2</button> 
    </div> 
    <br /> 
    <div id="javaquery"><b>Name will be displayed here</b></div> 
<% 
    String name = ""; 
    String q = request.getParameter("q"); 
    try { 
     Class.forName("net.sourceforge.jtds.jdbc.Driver"); 
     Connection con = DriverManager.getConnection("jdbc:jtds:sqlserver://192.168.0.14:1433/demolangako", "demolangme", "demolangme"); 
     Statement smt = con.createStatement(); //Create Statement to interact 
     ResultSet r = smt.executeQuery("select * from users where(id='" + q + "');"); 
     while (r.next()) { 
      name = r.getString("name"); 
     } 
     con.close(); 
    } catch (Exception e) { 
     e.printStackTrace(); 
    } 
%> 
Name:<%out.print(name);%> 

</body> 
</html> 

現在、私はこのコードを持っていますが、私のボタンでは機能しません。どんな助けもありがとうございます。

+0

プログラミング言語を使用して、プログラムを通過し、そのコードを読み取るコードを記述します。その後、データベースからの読み取り、データの表示、または世界各地に無作為に配置された9,457,642の金魚クラッカーを突然スティッキーチーズで爆発させるように、プログラムにあなたが望むやり方を伝えるコードを書いてください。偶然にも、これはMicrosoft IEが(Goldfish Crackersを爆発的に使用して)構築された方法です。 * ... *また、[** this **](http://www.dotnetodyssey.com/2015/01/02/calling-asp-net-code-behind-using)のようなものを見たいかもしれません。 -jquery-ajax-simple-complete-example /) – SpYk3HH

+0

データベースを照会するためにjqueryを追加し、ajaxを使用してページを動的に更新する必要があります。 RESTfulなサービスをサポートするフレームワークを使用しているなら、それを使うことができますが、同じことを達成する他の方法があります。 – NAMS

+0

私は "use ajax"と言うつもりでしたが、あなたはすでにあります。ちょうどあなたは同じページにajaxingの初心者の間違いをしました。解決策:2ページを作成します。バックエンドページへのajax呼び出しを行うプレゼンテーション用のもの。 (そして、JSPではなくJSPにアクセスする部分を作る) – developerwjk

答えて

0

まず、データベースアクセスコード(javaのみ)を別々のファイルに置いてください。これはindex.jspからのajaxリクエストを処理します。

第2点は、jQueryスクリプトを変更する必要があることです。ボタンのクリック値をajaxに送信したいので、代わりにこれを試してください。

$("button").click(function() { 
    $.get("jdbc.jsp", { 
    q: $(this).val() 
    }, function(data) { 
    $("#javaquery").html(data); 
    }); 
}); 
0

jspファイルにJavaコードを記述しないようにしてください。 How to avoid Java code in JSP files?の簡単な説明はBalusCです。

MVC2 patternをお読みください。 MVC2を使用している場合は、ビジネスとビューの明確な分離が必要です。

まず、簡単なjsp-servlet構造を作成する必要があります。私の答えはCreating a simple web page using servletです。上記の作業を終えたら、

ajaxを使用できます。 jQuery-ajaxを使用しているので、これを使って説明します。インポートjqueryライブラリを忘れないでください。

あなたのindex.jspは、このようにする必要があります。テキストボックスに値を入力してサブミットをクリックすると、サーブレットを介してデータベースにアクセスし、ページをリロードせずに結果を返す必要があります。私は例としてHelloServletに依頼しています。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Submit and View Page</title> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#newsubmit").click(function(e){ 
    $.ajax({ 
     type: "POST", 
     url: "HelloServlet", 
     data: { name: $("#myname").val() }, 
     success:function(result){ 
      alert(result); 
     } 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <form> 
     <label>Name: </label><input type='text' id="myname" name='name'/></br> 
     <input type="button" id="newsubmit" value="Submit" /> 
    </form> 
</body> 
</html> 

そして、あなたのサーブレットでは、

public class HelloServlet extends HttpServlet { 

    private static final long serialVersionUID = 1L; 

    @Override 
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException { 

     // Receive the username 
     String name = req.getParameter("name"); 
     String result = ""; 
     try { 
      Class.forName("net.sourceforge.jtds.jdbc.Driver"); 
      Connection con = DriverManager.getConnection("jdbc:jtds:sqlserver://192.168.0.14:1433/demolangako", "demolangme", "demolangme"); 

      // I prefer using prepared statements to avoid SQL injections 
      String selectSQL = "SELECT * FROM USERS WHERE NAME = ?"; 
      PreparedStatement preparedStatement = dbConnection.prepareStatement(selectSQL); 
      preparedStatement.setString(1, name); 
      ResultSet rs = preparedStatement.executeQuery(selectSQL); 
      while (rs.next()) { 
       result = rs.getString("name"); 
      } 
      String greetings = "Hello " + result; 
      response.setContentType("text/plain"); 
      response.getWriter().write(greetings); 
      con.close(); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 
} 

今、あなたはAJAXでの応答を受信します。お役に立てれば。

関連する問題