使用ajax将值从html传递到php页面并在div中打印返回值答案

【问题标题】：Pass value from html to php page using ajax and print the return value in div使用ajax将值从html传递到php页面并在div中打印返回值
【发布时间】：2017-02-19 00:29:11
【问题描述】：

我想使用 ajax 将一些值从我的 html 页面传递到 php 页面并在 div 中打印返回值

HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


<style type="text/css">

#div1, #div2{

    border: 1px solid #000;
    width: 30%;
    margin-left: 10%;
    height: 400px;
    margin-top: 20px;
    float: left;
}

#nm, #cls, #roll, #dob, #submit1{

   margin-top: 10px;
}

</style>


</head>

<body>

   <div id="div1" class="container input-group"> <!-- Make text input and button in same row with Bootstrap -->

        <form>
            <table width="70%">

                <tr>
                    <td align="right">Name : &nbsp;</td>
                     <td>
                        <input type="text" name="nm" id="nm" maxlength="30" class="form-control" placeholder="Name">
                    </td>
                </tr>

                <br>

                <tr>
                    <td align="right">Class : &nbsp;</td>
                     <td>
                        <select class="form-control" align="center" id="cls">
                            <option value="0">Please Select</option>
                            <option value="First Year">First Year</option>
                            <option value="Second Year">Second Year</option>
                            <option value="Third Year">Third Year</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right">Roll No. : &nbsp;</td>
                     <td>
                        <input type="text" name="roll" id="roll" class="form-control" placeholder="Roll No." align="center">
                    </td>
                </tr>

                <tr>
                    <td align="right">DOB : &nbsp;</td>
                     <td>
                        <input type="date" name="dob" id="dob" class="form-control" placeholder="Date of Birth" align="center">
                    </td>
                </tr>

                <tr>
                    <td></td>
                     <td>
                        <button class="btn btn-primary" name="submit1" id="submit1">Add</button>
                    </td>
                </tr>

            </table>

        </form>

   </div>

   <div id="div2">

   </div>


<script type="text/javascript">

$(document).ready(function() {           
$('#submit1').click(function() {
var nm = $('#nm').val();
var cls = $('#cls').val();
var roll = $('#roll').val();
var dob = $('#dob').val();
$.ajax({
    type: 'POST',
    url: 'index.php',
    data: ({ nm: nm, cls: cls, roll: roll, dob: dob }),
    success: function(response) {
        $('#div2').html(response);
    }
});
});
});

</script>


</body>
</html>

PHP 代码

<?php 

$nm = $_POST['nm'];
$cls = $_POST['cls'];
$roll = $_POST['roll'];
$dob = $_POST['dob'];


$date = date_format($date, 'Y-m-d');


$now = time();

$dob = strtotime('Y-m-d', $dob);

$difference = $now - $dob;

$age = floor($difference / 31556926);

echo "Name : ". $nm;

echo "Class : ". $cls;

echo "Roll No. : ". $roll;

echo "Age : ". $age;

?>

我不知道我的代码有什么问题。但是当我点击“添加”按钮后，我的地址栏看起来像这样：

index.html?nm=asd&roll=1&dob=1992-08-12&submit1=

即使我使用的是 POST 方法。需要帮助。

【问题讨论】：

标签： php jquery html ajax

【解决方案1】：

您必须将表单方法提供为"POST"，这样它就永远不会将提交的数据发送到您访问的 URL。

您面临的问题是您没有为<form> 属性指定任何方法，因此它采用GET 方法。

先了解GET和POST方法的区别

【讨论】：

他使用ajax发帖。但他忘记了event.preventDefault()，所以表单仍然提交。

【解决方案2】：

您的点击功能仍会发布表单。使用 Javascript 的 preventDefault() 来解决这个问题

$('#submit1').click(function(event) {
    event.preventDefault();
    var nm = $('#nm').val();
    var cls = $('#cls').val();
    var roll = $('#roll').val();
    var dob = $('#dob').val();
    $.ajax({
        type: 'POST',
        url: 'index.php',
        data: ({ nm: nm, cls: cls, roll: roll, dob: dob }),
        success: function(response) {
            $('#div2').html(response);
        }
    });
});

【讨论】：

没问题，我很乐意为您提供帮助，您能否将此标记为答案并关闭问题。问候！
我赞成您的回答，但我收到了以下通知：感谢您的反馈！声望低于 15 人的投票会被记录下来，但不会更改公开显示的帖子分数 抱歉
@Arnab 哈哈，那没问题：P