js请求服务器,并返回信息，请求过程中不需要跳转页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js请求服务器,并返回信息，请求过程中不需要跳转页面相关的知识，希望对你有一定的参考价值。
js请求服务器,并返回信息，请求过程中不需要跳转页面，假如我点了<input type=‘submit’ name=‘提交’ onclick='tijiao()'>这个后，我只想用js提交请求，假如请求时www.test.com/abc.php&a=1,不过在请求过程中不需要跳转到别的页面，并在js中用变量存储服务器返回的信息，那么onclick='tijiao()'这个事件如何写呢
？
这个可以通过jQuery框架轻松实现，jQuery中包含多种ajax的请求方式，详细可以参考下对应 的API。
你上面定义的按钮类型是submit，如果是在form当中，将会自动提交当前form表单，建议，如果可能的话将其修改为button类型。
下面给出通过jQuery的$.post方式，异步获取服务器的JSON数据。
功能代码：
<script type="text/javascript">$(function()
// 定义存放服务器返回值的变量
var jsonData = null;
$('#submitBtn').click(function()
// 请求的参数
var params = ;
$.post('json.json', params, function(data)
// 这里data就是返回的JSON对象
jsonData = data;
alert(jsonData.name);
, 'json');
);
);
</script>
完整代码：
<html><head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="
<script type="text/javascript">
$(function()
// 定义存放服务器返回值的变量
var jsonData = null;
$('#submitBtn').click(function()
// 请求的参数
var params = ;
$.post('json.json', params, function(data)
// 这里data就是返回的JSON对象
jsonData = data;
alert(jsonData.name);
, 'json');
);
);
</script>
</head>
<body>
<div>
<input type="button" value="提交" id="submitBtn"/>
</div>
</body>
</html>
那上面的代码我要在哪里补上那个请求的链接？
$.post方法是不是以POST方式向服务器发送参数？
$.post方法是不是以POST方式向服务器发送参数？
参考技术A 首先把submit改成button 然后再函数里用ajax提交 获取数据后局部刷新即可 参考技术B jquery:$.ajax(cache : false,
url : 'action!method',
type : 'post',
dataType : 'json',
data :
param1:xxi',
param2:'xx'
,
success : function(json)
alert('ok');
,
error : function(json)
alert("出错了！");
); 参考技术C ajax
简单就用jquery
HTTP的请求过程解析
HTTP是什么
HTTP 是一个无状态的协议，无状态指在客户端（Web 浏览器）和服务器之间不需要建立持久的连接，在一个客户端向服务器端发出请求且服务器收到该请求并返回响应（response）后，本次通信结束，HTTP 连接将被关闭，服务器不保留连接的相关信息。
HTTP 遵循请求（Request）/应答（Response）模型，客户端向服务器发送请求，服务器处理请求并返回适当的应答。
HTTP传输流程
HTTP 的传输流程包括地址解析、封装 HTTP 数据包、封装 TCP 包、建立 TCP 连接、客户端发送请求、服务器响应、服务器关闭 TCP 连接，具体流程如下。
（1）地址解析：地址解析通过域名系统 DNS 解析服务器域名从而获得主机的 IP 地址。例如，用客户端的浏览器请求 http://localhost.com:8080/index.htm，则可从中分解出协议名、主机名、端口、对象路径等部分结果如下。
- 协议名：HTTP
- 主机名：localhost.com
- 端口：8080
- 对象路径：/index.htm
（2）封装 HTTP 数据包：解析协议名、主机名、端口、对象路径等并结合本机自己的信息封装成一个 HTTP 请求数据包。
（3）封装 TCP 包：将 HTTP 请求数据包进一步封装成 TCP 数据包。
（4）建立 TCP 连接：基于 TCP 的三次握手机制建立 TCP 连接。
（5）客户端发送请求：在建立连接后，客户端发送一个请求给服务器。
（6）服务器响应：服务器在接收到请求后，结合业务逻辑进行数据处理，然后向客户端返回相应的响应信息。在响应信息中包括状态行、协议版本号、成功或错误的代码、消息体等内容。
（7）服务器关闭 TCP 连接：服务器在向浏览器发送请求响应数据后关闭 TCP 连接。但如果浏览器或者服务器在消息头中加入了 Connection：keep-alive，则 TCP 连接在请求响应数据发送后仍然保持连接状态，在下一次请求中浏览器可以继续使用相同的连接发送请求。采用 keep-alive 方式不但减少了请求响应的时间，还节约了网络带宽和系统资源。
HTTP常见状态码
| 状态码 | 原因短语 |
| 消息响应 | |
| 100 | Continue(继续) |
| 101 | Switching Protocol(切换协议) |
| 成功响应 | |
| 200 | OK(成功) |
| 201 | Created(已创建) |
| 202 | Accepted(已创建) |
| 203 | Non-Authoritative Information(未授权响应) |
| 204 | No Content (无内容) |
| 205 | Reset Content(重置内容) |
| 206 | Partial Content (部分内容) |
| 网络重定向 | |
| 300 | Multiple Choice(多种选择) |
| 301 | Moved Permanently(永久移动) |
| 302 | Found(临时移动) |
| 303 | See Other(查看其他位置) |
| 304 | Not Modified(未修改) |
| 305 | Use Proxy(使用代理) |
| 306 | unused (未使用) |
| 307 | Temporary Redirect(临时重定向) |
| 308 | Permanently Redirect(永久重定向) |
| 客户端错误 | |
| 400 | Bad Request(错误请求) |
| 401 | Unauthorized(未授权) |
| 402 | Payment Required(需要付款) |
| 403 | Forbidden(禁止访问) |
| 404 | Not Found(未找到) |
| 405 | Method Not Allowed(不允许使用该方法) |
| 406 | No Acceptable(无法接受) |
| 407 | Proxy Authentication Required(要求代理身份验证) |
| 408 | Request Timeout(请求超时) |
| 409 | Conflict(冲突) |
| 410 | Gone(已失效) |
| 411 | Length Required(需要内容的长度) |
| 412 | Precondition Failed(预处理失败) |
| 413 | Request Entity Too Large(请求实体过长) |
| 414 | Request-URI Too Large(请求网络过长) |
| 415 | Unsupported Media Type(媒体类型不支持) |
| 416 | Requested Range Not Satisfiable(请求范围不合要求) |
| 417 | Expectation Failed(预期结果失败) |
| 服务器端错误 | |
| 500 | Internal Server Error(内部服务器错误) |
| 501 | Implemented(实现) |
| 502 | Bad Gateway(网关错误) |
| 503 | Service Unavailable(服务不可用) |
| 504 | Gateway Timeout(网管超时) |
| 505 | HTTP Version Not Supported(HTTP 版本不受支持) |
以上是关于js请求服务器,并返回信息，请求过程中不需要跳转页面的主要内容，如果未能解决你的问题，请参考以下文章