dongzheng3113
2016-10-10 14:35
浏览 103

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

I want to pass some value from my html page to php page using ajax and print the return value in a div

HTML Code :

<!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 Code

<?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;

?>

I don't know what is wrong with my code. But after I click on "Add" button my address bar looks like this :

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

even though I am using POST method. Help is needed.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • duanquanzhi5560 2016-10-10 14:39
    已采纳

    Your click function still posts the form. use Javascript's preventDefault() to counter this

    $('#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);
            }
        });
    });
    
    点赞 打赏 评论
  • dongpu5874 2016-10-10 14:39

    You have to provide the form method as "POST" then alone it will never send the submitted data to the URL which you access.

    What problem you face is that you have not specified any method to your <form> attribute and hence it takes the GET method.

    First Learn the difference between GET and POST methods

    点赞 打赏 评论

相关推荐 更多相似问题