不加$(function{})这个函数就会出错

<!DOCTYPE html>
<html>
<head>
<style>
.b {
margin-left: 300px;
}
#div2{
margin-left: 300px;
float: left;
}
#div3{
margin-left: 300px;
float: left;
}
#div4{
margin-left: 300px;
float: left;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
document.getElementById("b1").onclick = function() {
   alert("欢迎点击");
  var xmlhttp;
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  } else {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET", "/ajax/Servlet", true);
  xmlhttp.send();
  xmlhttp.onreadystatechange = function() {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var text = xmlhttp.responseText;
    var json = JSON.parse(text);
    var name = "";
    for (var i = 0; i < json.length; i++) {
     name = name + json[i].name+"<br>";
    }
    document.getElementById("div2").innerHTML = name;
   }
  }
}

package com.imooc.ajax;

public class Emp {
String name;
String pos;
String dep;

public Emp() {
super();
}

public Emp(String name, String pos, String dep) {
  super();
  this.setName(name);
  this.setDep(dep);
  this.setPos(pos);
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getPos() {
return pos;
}

public void setPos(String pos) {
this.pos = pos;
}

public String getDep() {
return dep;
}

public void setDep(String dep) {
this.dep = dep;
}

@Override
public String toString() {
return "emp [name=" + name + ", pos=" + pos + ", dep=" + dep + "]";
}

}

package com.imooc.ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import jdk.nashorn.internal.runtime.JSONFunctions;

/**
* Servlet implementation class Servlet
*/
@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  List<Emp> list=new ArrayList<Emp>();
  list.add(new Emp("小明","职员","人事部"));
  list.add(new Emp("小白","经理","技术部"));
  list.add(new Emp("小红","职员","无线事业部"));
  String json=JSON.toJSONString(list);
  response.setContentType("text/html;charset=utf-8");
  response.getWriter().println(json);
}

}

有点麋鹿 2019-03-10

源自：jQuery与Ajax入门 2-8 自由编程

收起

5回答

好帮手慕阿满回答被采纳获得+3积分 2019-03-12 11:11:39

同学你好，加上JQuery，使用$(function)的样式，当页面加载完之后执行function中的内容，此时js位置在哪都无所谓。但是如果不加JQuery这种样式，js代码要写在元素的后边，避免因为元素没加载就执行js代码造成未定义引用或空引用的错误。祝：学习愉快~

收起回答

好帮手慕阿满 2019-03-11 18:14:34

同学需要将js的代码写咋body的后边，避免因为没加载html文件都已将运行js代码，修改如：

<!DOCTYPE html>
<html>
<head>
<style>
.b {
	margin-left: 300px;
}

#div2 {
	margin-left: 300px;
	float: left;
}

#div3 {
	margin-left: 300px;
	float: left;
}

#div4 {
	margin-left: 300px;
	float: left;
}
</style>

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="div1">
		<input id="b1" class="b" type="button" value="员工列表"> <input
			id="b2" class="b" type="button" value="职位列表"> <input id="b3"
			class="b" type="button" value="部门列表">
	</div>
	<div id="div2"></div>
	<div id="div3"></div>
	<div id="div4"></div>
</body>
<script>
	alert("欢迎测试");
	document.getElementById("b1").onclick = function() {
		alert("欢迎点击");
		var xmlhttp;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET", "/ajax/Servlet", true);
		xmlhttp.send();
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var text = xmlhttp.responseText;
				var json = JSON.parse(text);
				var name = "";
				for (var i = 0; i < json.length; i++) {
					name = name + json[i].name + "<br>";
				}
				document.getElementById("div2").innerHTML = name;
			}
		}
	}

	document.getElementById("b2").onclick = function() {
		alert("欢迎点击");
		var xmlhttp;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET", "/ajax/Servlet", true);
		xmlhttp.send();
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var text = xmlhttp.responseText;
				var json = JSON.parse(text);
				var name = "";
				for (var i = 0; i < json.length; i++) {
					name = name + json[i].pos + "<br>";
				}
				document.getElementById("div3").innerHTML = name;
			}
		}
	}
	document.getElementById("b3").onclick = function() {
		alert("欢迎点击");
		var xmlhttp;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET", "/ajax/Servlet", true);
		xmlhttp.send();
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var text = xmlhttp.responseText;
				var json = JSON.parse(text);
				var name = "";
				for (var i = 0; i < json.length; i++) {
					name = name + json[i].dep + "<br>";
				}
				document.getElementById("div4").innerHTML = name;
			}
		}
	}
</script>
</html>

另外如果还有错误，请将错误信息贴一下。

祝：学习愉快~

收起回答

提问者有点麋鹿 #1

谢谢老师的回答，代码没有问题了，我记得好像像<style><script>这些标签是写在<head>标签里面的啊~怎么还跟位置有关系了呢？？<script>要写在该执行的顺序位置吗？

2019-03-11 21:37:34

提问者有点麋鹿 2019-03-11 11:27:49

<!DOCTYPE html>
<html>
<head>
<style>
.b {
margin-left: 300px;
}
#div2{
margin-left: 300px;
float: left;
}
#div3{
margin-left: 300px;
float: left;
}
#div4{
margin-left: 300px;
float: left;
}
</style>
<script>
alert("欢迎测试");
document.getElementById("b1").onclick = function() {
alert("欢迎点击");
var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} else {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/ajax/Servlet", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   var text = xmlhttp.responseText;
   var json = JSON.parse(text);
   var name = "";
   for (var i = 0; i < json.length; i++) {
    name = name + json[i].name+"<br>";
   }
   document.getElementById("div2").innerHTML = name;
  }
}
}