通过json / ajax传递html表单值

Question

I have a basic html form and I'm trying to use jquery and json to pass the value of the form to PHP. 我有一个基本的html表单，我正在尝试使用jquery和json将表单的值传递给PHP。 I'm new at this, but I did a lot of research and I thought I had everything entered correct. 我是新手，但我做了很多研究，以为自己输入的所有内容正确无误。 The page no longer reloads when I hit submit (and that's the behavior I want), but I coded an javascript alert to see if the data is being passed and that alert is not working. 当我点击“提交”时，页面不再重新加载（这就是我想要的行为），但是我编写了一个JavaScript警报，以查看是否正在传递数据并且该警报不起作用。 I've been looking at this code for hours and I can't seem to find any errors. 我已经看了几个小时的这段代码，似乎找不到任何错误。 Can someone tell me why the alert is not working? 有人可以告诉我为什么警报不起作用吗？

here is my main.php 这是我的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>

here is my globe.js 这是我的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;
    });

here's my post.php 这是我的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);
?>

Answer 1

Make the changes in globe.js and it works: 在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;
    });

Answer 2

I don't know if thats gonna work, but i think that your data attribute should be an object. 我不知道那是否行得通，但我认为您的数据属性应该是一个对象。

 $('#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;
});

通过json / ajax传递html表单值

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-04-24 04:00:34

解决方案2
0 2014-04-24 01:42:51

通过json / ajax传递html表单值

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-04-24 04:00:34

解决方案2 0 2014-04-24 01:42:51

解决方案1
1 已采纳 2014-04-24 04:00:34

解决方案2
0 2014-04-24 01:42:51