드롭다운 목록에 데이터를 동적으로 추가하는 Ajax 메소드

이 글에서는 주로 드롭다운 목록에 데이터를 동적으로 추가하는 Ajax의 구현 방법을 소개합니다. 필요하신 분들은 참고하시면 됩니다.

1. 프론트 엔드 JSP에서 새로운 드롭다운 컨트롤을 생성하세요

<select id="seldvd" onChange="sel_onchange(this)"></select>

2 .js 부분에서 함수 메서드를 만들고 ajax를 사용하여 'getAllTypes.action'의 서블릿 부분을 가리킨 다음 드롭다운 목록에서 데이터를 가져와 동적으로 채웁니다.

<span style="white-space:pre"> </span>function loadType(){ 
<span style="white-space:pre">   </span>$.get( 
 <span style="white-space:pre">  </span>    &#39;getAllTypes.action&#39;, 
<span style="white-space:pre">   </span>  function(data){ 
<span style="white-space:pre">   </span>   var $sel = $("#seldvd"); 
<span style="white-space:pre">     </span> // console.log(data); 
<span style="white-space:pre">   </span>   for(var i = 0;i<data.length;i++){ 
<span style="white-space:pre">     </span> <span style="white-space:pre">  </span>$item = $("<option></option>"); //添加option 
<span style="white-space:pre">     </span> <span style="white-space:pre">  </span>$item.val(data[i].id); //添加option的value ，<span style="line-height: 1.5; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif;"><span style="font-size:10px;">数据库中用id和type保存的数据</span></span> 
<span style="white-space:pre">     </span> <span style="white-space:pre">  </span>$item.html(data[i].type); //添加option数据 
<span style="white-space:pre">     </span> <span style="white-space:pre">  </span>$sel.append($item); //将option添加进select 
 <span style="white-space:pre">  </span>     } 
 <span style="white-space:pre">  </span>    },&#39;json&#39; 
 <span style="white-space:pre">  </span>   ); 
<span style="white-space:pre"> </span>}

3. Ajax에 데이터를 반환하려면

public void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    request.setCharacterEncoding("utf-8"); 
    ArrayList<typeInfo> typeList = new ArrayList<typeInfo>(); 
    typeDao td = new typeDao(); 
    typeList = td.getAllTypes(); 
    JSONArray arr = new JSONArray(typeList);//这里导入需要转json数据包 
    String jsString = arr.toString(); 
    //响应到客户端     
    request.setCharacterEncoding("utf-8"); 
    response.setContentType("text/plain;charset=utf-8"); 
    response.getWriter().print(jsString); //返回下拉列表需要的json格式数据 
  }

4. 그러면 문제는 이 데이터의 소스가 어디에 있습니까? 물론 데이터베이스(MySQL)에서요. 먼저 데이터베이스의 데이터를 읽는 메소드를 작성해야 합니다

<strong>typeInfo.java</strong>

import java.io.Serializable; 
public class typeInfo implements Serializable { 
  private int id; 
  private String type; 
  public int getId() { 
    return id; 
  } 
  public void setId(int id) { 
    this.id = id; 
  } 
  public String getType() { 
    return type; 
  } 
  public void setType(String type) { 
    this.type = type; 
  } 
  public typeInfo(){ 
  } 
  public typeInfo(int id, String type) { 
    this.id = id; 
    this.type = type; 
  } 
}

TypeDao.java(JDBC 패키지를 가져와야 함)

import java.sql.Connection; 
import java.sql.PreparedStatement; 
import java.sql.ResultSet; 
import java.util.ArrayList; 
import model.typeInfo; 
public class typeDao extends baseDao { 
  public ArrayList<typeInfo> getAllTypes(){ 
    ArrayList<typeInfo> typeList = new ArrayList<typeInfo>(); 
    Connection con = null; 
    PreparedStatement psm = null; 
    ResultSet rs = null; 
    try { 
      con = super.getConnection(); 
      psm = con.prepareStatement("select * from types"); 
      rs = psm.executeQuery(); 
      while(rs.next()){ 
        typeInfo types = new typeInfo(); 
        types.setId(rs.getInt(1)); 
        types.setType(rs.getString(2)); 
        typeList.add(types); 
      } 
    } catch (Exception e) { 
      System.out.println("显示所有类型报错："+e.getMessage()); 
    }finally{ 
      super.closeAll(rs, psm, con); 
    } 
    return typeList; 
  //  
  } 
}

4 이제 Tomcat을 사용하여 웹 페이지와 드롭다운 목록을 엽니다. 데이터를 표시합니다

위 내용은 모두를 위해 정리한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

도메인 간 액세스를 달성하기 위해 Access-Control-Allow-Origin 설정

Ajax는 아바타를 등록하고 선택한 후 업로드하는 기능을 구현합니다.

async:false 및 async 세부 정보 :Ajax 요청의 경우 true 차이

위 내용은 드롭다운 목록에 데이터를 동적으로 추가하는 Ajax 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!