Question

我检索了日期的数据库记录并将其填充到JSON对象中。我正在尝试将JSON发送到javascript，以便DatePicker UI将是动态的，通过让JSON中保存的任何日期在日历上不可用。

但是，它似乎无法正常工作，因为日历上的所有日期都是无法选择的。

的index.jsp

＆＃13;

<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!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>Insert title here</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 

  <script type="text/javascript">
    
  jQuery(document).ready(function($) {
      var dates;
      $.ajax({
      	  url:'dating',
          type:'post',
          data: {
              action: 'unavail_dates',
              unavaildates: '2'
          },
          success: function (data) {
              dates = data;
              console.log ( dates );
          }
      });

      $('#MyDate').datepicker({
          dateFormat: 'dd-mm-yy',
          beforeShowDay: function (date) {
              var string = $.datepicker.formatDate('yy/mm/dd', date);
              return [dates != undefined && $.inArray(string, dates) > -1];
          },
          onSelect: function (dateText) {
              jQuery(this).change();
          }
      });
  });
  </script>
</head>
<body>
  <tr id="tr1">
    <td>Select appointment date: </td>
    <td><input type="text" id="MyDate" value="" /></td>
  </tr> 
</body>
</html>

＆＃13;

dating.java

＆＃13;

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONObject;

import object.Dates;

/**
 * Servlet implementation class dating
 */
public class dating extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public dating() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Connection con = null;
	    Statement st = null;
	    ResultSet rs = null;
	    String dbName = "eBooking";
	    String uname = "user";
	    String pwd = "user";
	    String url = "jdbc:mysql://localhost:3306/" + dbName;


	    try {
	      Class.forName("com.mysql.jdbc.Driver").newInstance();
	      con = DriverManager.getConnection(url, uname, pwd);
	      System.out.println("Connection Established: " + con);
	      String qry = "select bookedDate from appointment_booked";

	      st = con.createStatement();
	      rs = st.executeQuery(qry);

	      PrintWriter out= response.getWriter();   
	      JSONObject jObj = new JSONObject();
	      ArrayList < Dates > list = new ArrayList < Dates > ();
	      Map < String, String > map = new HashMap < String, String > ();
	      Dates sPojo = null;
	      while (rs.next()) {
	        sPojo = new Dates();

	        sPojo.setDates(rs.getString("bookedDate"));
	        list.add(sPojo);

	      }
	      System.out.println(list);

	      jObj.put("dates", list);
	      out.print(jObj); 

	      System.out.println(jObj.toString());

	    } catch (Exception e) {
	      e.printStackTrace();
	    }
	}

}

＆＃13;

的web.xml

＆＃13;

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>databaseJson</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>dating</display-name>
    <servlet-name>dating</servlet-name>
    <servlet-class>servlet.dating</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>dating</servlet-name>
    <url-pattern>/dating</url-pattern>
  </servlet-mapping>
</web-app>

＆＃13;

Answer 1

您有异步请求$.ajax，因此在激活datepicker后执行success函数。您必须在success函数内移动datepicker的初始化。

Json ajax DatePicker - 不可用日期

1 个答案: