ajax+jsp一些心得

AJAX+JSP 项目总结

最近做了一个jsp+ajax的小项目
把学到的一些东西记录下来
主要针对ajax做一些总结

• ajax提交表单
• ajax更新页面数据
• ajax向后台传送数据
• 双击表单单元格使之可编辑
• jsp从数据库拉取数据

---

ajax提交表单

在使用下面代码之前需要引用jquery函数库

$(function(){
       $('#subbtn').click(function(){

           $.ajax({
                type: "POST",
                dataType: "html",
                url: "./updatdata.jsp", //后台文件的url 就是form的action,用ajax提交表单就不需要给form写action了
                data: $('#myform').serialize(),//表单数据序列化

                success: function (result) {
                    alert("信息修改完成！");
                    //location.reload()//刷新页面 
                },
                error: function(data) {
                  alert("查询数据失败");
                 }  
                });
       }) 
    });

ajax更新页面数据

function showemp(str)
{

  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)   //响应完成
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","text/getemp.jsp?q="+str,true);//q是要传送到后台的数据，不需要传送就不要写

  xmlhttp.send();
}

双击使单元格可编辑

function ShowElement(element) {
        var oldhtml = element.innerHTML;

        var newobj = document.createElement('input');

        newobj.type = 'text';

        newobj.value = oldhtml;

        newobj.onblur = function() {
            element.innerHTML = this.value == oldhtml ? oldhtml : this.value;

        }

        element.innerHTML = '';

        element.appendChild(newobj);

        newobj.setSelectionRange(0, oldhtml.length);

        newobj.focus();

    }

jsp从数据库拉取数据放到select中

  <select   size="8"  style="width:100px"  name="emp" onchange="showemp(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
       <%
           //con database
          String url="jdbc:derby://localhost:1527/HR";
          Class.forName("org.apache.derby.jdbc.ClientDriver");
          Connection con = DriverManager.getConnection(url,"a","a");
          PreparedStatement stmt = con.prepareStatement("select * from train_exam_dept");                                     
          ResultSet rst = stmt.executeQuery();

           int dept_id = 0;
             while(rst.next()){
            String name  = rst.getString("name");
             dept_id = rst.getInt("id");
            out.println(" <option value = "+ dept_id +" >"+name+"</option> ");

           //  String id = rst.getString("id");
           //  out.println(id);
           }
                              %>
           </select>

以上
新人练手，望大佬指教！