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>

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