通過json / ajax傳遞html表單值
[英]Passing html form value through json/ajax
問題描述
我有一個基本的html表單，我正在嘗試使用jquery和json將表單的值傳遞給PHP。 我是新手，但我做了很多研究，以為自己輸入的所有內容正確無誤。 當我點擊“提交”時，頁面不再重新加載（這就是我想要的行為），但是我編寫了一個JavaScript警報，以查看是否正在傳遞數據並且該警報不起作用。 我已經看了幾個小時的這段代碼，似乎找不到任何錯誤。 有人可以告訴我為什么警報不起作用嗎？
這是我的main.php
<!DOCTYPE html>
<html>
<head>
<title>leader</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class = "container">
<form action="post.php" method="post" id="add">
<input type="text" class="leader" name="name" placeholder="Leader">
<input type="submit" value="send" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.js"></script>
<script src="globe.js"></script>
<ul id ="hours_zoned">
<li class="nine">9</li>
<li class="ten">10</li>
<li class="eleven">11</li>
<li class="twelve">12</li>
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="six">6</li>
<li class="seven">7</li>
<li class="eight">8</li>
<li class="nine">9</li>
</ul>
</div>
</body>
</html>
這是我的globe.js
$('#add').on('submit', function() {
var name = $('.leader').val();
$.ajax({
url: 'post.php',
dataType: 'json',
type: 'post',
data: name,
success: function (data) {
if(data.success) {
alert('the result is ' + data.result);
}
}
});
return false;
});
這是我的post.php
<?php
header('Content-type: text/javascript');
$json = array(
'success' => false,
'result' => 0
);
if(isset($_POST['name'])) {
$name = $_POST['name'];
$json['success'] = true;
$json['result'] = $name;
}
echo json_encode($json);
?>
2 個解決方案
解決方案1
1 已采納 2014-04-24 04:00:34
在globe.js中進行更改，它可以工作：
$('#add').on('submit', function() {
var name = $('.leader').val();
$.ajax({
url: 'post.php',
dataType: 'json',
type: 'post',
data: 'name='+name,
success: function (data) {
if(data.success) {
alert('the result is ' + data.result);
}
}
});
return false;
});
解決方案2
0 2014-04-24 01:42:51
我不知道那是否行得通，但我認為您的數據屬性應該是一個對象。
$('#add').on('submit', function() {
var name = $('.leader').val();
$.ajax({
url: 'post.php',
dataType: 'json',
type: 'post',
data:{
name : 'Name value'
},
success: function (data) {
if(data.success) {
alert('the result is ' + data.result);
}
}
});
return false;
});
ajax將json值傳遞給html頭類
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.