Javascript 使用HTML5、Ajax和jQuery发送表单
我需要使用Ajax和jQuery从HTML5编码页面发送表单。我不知道如何正确地将参数从表单发送到Ajax和jQuery。如何正确发送？ 我的应用程序必须获取用户的tweets（来自tweet.com），user_id和tweets amound是参数，必须输入到表单中Javascript 使用HTML5、Ajax和jQuery发送表单,javascript,jquery,ajax,html,Javascript,Jquery,Ajax,Html,我需要使用Ajax和jQuery从HTML5编码页面发送表单。我不知道如何正确地将参数从表单发送到Ajax和jQuery。如何正确发送？ 我的应用程序必须获取用户的tweets（来自tweet.com），user_id和tweets amound是参数，必须输入到表单中 <!doctype html> <html> <head> <meta charset="utf-8"> <title>(Th
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>(This is a title) Page example using HTML5</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
header {
border-style: dashed;
border-width: 0 0 1px 0;
margin-bottom: 20px;
padding: 10px
}
header h2 {
text-align: center;
}
#tweets article {
margin-bottom: 20px;
}
#tweets article h1 img {
float: left;
}
#tweets article h1 span {
font-size: 14px;
color: blue;
}
#tweets article details span {
font-size: 12px;
color: gray;
}
</style>
</head>
<body>
<header>
<h2>Page header</h2>
</header>
<!-- Control unit -->
<nav></nav>
<!-- Primary unit -->
<section id="content">
<!-- Control units -->
<section id="controls"></section>
<form id="tweetshow" method="post" action="" >
<p>
Enter user_id: <input type="text" name="user_id" />
</p>
<p>
Enter user last tweets amount: <input type="text" name="last_tweets_amount" />
</p>
<p>
From date: <input type="text" name="from_date" />
</p>
<p>
To date: <input type="text" name="to_date" />
</p>
<p>
<input type="button" value="Submit" onClick="AjaxFormRequest()"/>
</p>
</form>
<!-- tweet units -->
<section id="tweets"></section>
</section>
<footer>
<p>Page bottom</p>
</footer>
<script type="text/javascript">
//
// Example AJAX-request executing to Twitter API
//
var params = {
include_entities: true,
include_rts: true,
screen_name: "some_user_id",
count: 3
};
function AjaxFormRequest(user_id, tweets_amount)
{
params.screen_name = user_id;
params.count = tweets_amount;
}
function ShowTweets()
{
$(document).ready(function() {
//Proxy entry point
var apiEndPoint = "http://localhost:8888/1.1/";
// Request parameters are here
// https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
// To execute async-request using jQuery
$.ajax({
// Full URL to source
url: apiEndPoint + "statuses/user_timeline.json",
// HTTP-request type
type: "POST",
// Returned data type
dataType: "jsonp",
// Parameters
data: params,
// method if response has been successful
success: function (response) {
// look all response array
$.each(response, function (i, item) {
//console.dir(item);
// to wrap data into html and insert into #tweets section
var $header = $("<h1>")
.append($("<img>", { src: item.user.profile_image_url}))
.append($("<span>").html(item.user.name));
var $text = $("<p>").html(item.text);
var $details = $("<details>").append(
$("<span>").html(item.created_at)
);
$("<article>", { id: item.id })
.append($header, $text, $details)
.appendTo("#tweets");
});
},
// method if response has not been successful
error: function (xhr, status, error) {
alert("An error is occured: " + status);
}
});
/*
OR
we can use short method
$.getJSON("https://api.twitter.com/1/statuses/user_timeline.json?callback=?", params, function(data) {
console.dir(data);
})
.error(function(xhr, status, error) {
console.log(xhr);
});
*/
});
}
</script>
</body>
</html>
（这是一个标题）使用HTML5的页面示例
标题{
边框样式：虚线；
边框宽度：0 1px 0；
边缘底部：20px；
填充：10px
}
收割台h2{
文本对齐：居中；
}
#推特文章{
边缘底部：20px；
}
#推特文章h1 img{
浮动：左；
}
#tweets文章h1-span{
字体大小：14px；
颜色：蓝色；
}
#推文文章详细信息{
字体大小：12px；
颜色：灰色；
}
页眉
输入用户id:
输入用户最近的推文数量：
自日期起：
迄今为止：
页面底部
//
//执行到twitterapi的AJAX请求示例
//
变量参数={
包括实体：true，
包括：正确，
屏幕名称：“某些用户id”，
计数：3
};
函数AjaxFormRequest（用户id、推文数量）
{
params.screen_name=用户id；
params.count=推特数量；
}
函数showteets（）
{
$（文档）.ready（函数（）{
//代理入口点
var apidentpoint=”http://localhost:8888/1.1/";
//请求参数在这里
// https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
//使用jQuery执行异步请求
$.ajax({
//源的完整URL
url:apiEndPoint+“statuses/user_timeline.json”，
//HTTP请求类型
类型：“POST”，
//返回的数据类型
数据类型：“jsonp”，
//参数
数据：params，
//方法，如果响应已成功
成功：功能（响应）{
//查找所有响应数组
$。每个（响应、功能（i、项目）{
//console.dir（项目）；
//将数据包装成html并插入#tweets部分
变量$header=$（“”）
.append（$（“”）.html（item.user.name））；
var$text=$（“”）.html（item.text）；
变量$details=$（“”）。追加(
$（“”）.html（item.created_at）
);
$（“”，{id:item.id}）
.append（$header、$text、$details）
.附于（“#推文”）；
});
},
//方法，如果响应未成功
错误：函数（xhr、状态、错误）{
警报（“发生错误：+状态”）；
}
});
/*
或
我们可以使用简短的方法
$.getJSON（“https://api.twitter.com/1/statuses/user_timeline.json?callback=?，参数，函数（数据）{
console.dir（数据）；
})
.错误（功能（xhr、状态、错误）{
console.log（xhr）；
});
*/
});
}
数据：$（“#tweetshow”）.serialize（）
Serialize（）以URL编码表示法将表单字段作为字符串返回。您可以按照Barry所说的做，也可以使用
data: JSON.stringify(params)
在Ajax调用中