javascript - How to get and pass data from html to php using ajax - Stack Overflow

admin管理员组

文章数量:1434363

Hi I would love to know how can I pass the strings from a form to a php that will test if there is something in it and then post an alert message using this form to try and get data from it and then show if it was passed correctly.

HTML code:

<form action='' method=''>
Name:<input type='text' name='name' id='name'>
Age:<input type='text' name='age' id='age'>
message:<textarea name='message' id='message'></textarea>
<input type='submit' value='Send'>
</form>

Output:

<?php
if(isset($_POST['name']) && isset($_POST['age']) && isset($_POST['message'])){

$a = $_POST['name'];
$b = $_POST['age'];
$c = $_POST['message'];

   if($a != NULL && $b != NULL && $c != NULL)
       {
         echo "
                <script type='text/javascript'>
                window.alert('Success'+ a + b + c)
                </script>
              ";
        }


};?>

While still in the same page from before but shows what I have typed in there into the alert box.

I would also appreciate if it es with instruction on how to use it with get and post functions and also with links if it can be done?

Hi I would love to know how can I pass the strings from a form to a php that will test if there is something in it and then post an alert message using this form to try and get data from it and then show if it was passed correctly.

HTML code:

<form action='' method=''>
Name:<input type='text' name='name' id='name'>
Age:<input type='text' name='age' id='age'>
message:<textarea name='message' id='message'></textarea>
<input type='submit' value='Send'>
</form>

Output:

<?php
if(isset($_POST['name']) && isset($_POST['age']) && isset($_POST['message'])){

$a = $_POST['name'];
$b = $_POST['age'];
$c = $_POST['message'];

   if($a != NULL && $b != NULL && $c != NULL)
       {
         echo "
                <script type='text/javascript'>
                window.alert('Success'+ a + b + c)
                </script>
              ";
        }


};?>

While still in the same page from before but shows what I have typed in there into the alert box.

I would also appreciate if it es with instruction on how to use it with get and post functions and also with links if it can be done?

• php
• javascript
• html
• ajax
• post

Share Improve this question Follow edited Mar 7, 2013 at 5:42 rptwsthi 10.2k1010 gold badges7272 silver badges112112 bronze badges asked Mar 7, 2013 at 5:40 user1868185user1868185 89933 gold badges99 silver badges2525 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

For an easy way you can Make following changes to your code:

HTML:

<form action='' method='' id="myform">
Name:<input type='text' name='name' id='name'>
Age:<input type='text' name='age' id='age'>
message:<textarea name='message' id='message'></textarea>
<input type='submit' value='Send'>
</form>

PHP:

(your_page_with_php_script)

<?php
if(isset($_POST['name']) && isset($_POST['age']) && isset($_POST['message'])){

$a = $_POST['name'];
$b = $_POST['age'];
$c = $_POST['message'];

   if($a != NULL && $b != NULL && $c != NULL)
   {
      echo "Success ".a." ".b." ".c;
   }


};
?>

Script: (Include jquery first)

$('#myform').submit(function(){

var name = $('#name').val();
var age = $('#age').val();
var message = $('#message').val();


$.ajax({
  type: "POST",
  url: "your_page_with_php_script.php",
  data: "name="+name+"&age="+age+"&message="+message,
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

});

edit the following according to the need:

$.ajax({
  type: 'POST',
  url: 'your_php_page.php',
  data: { postVar1: 'theValue1', postVar2: 'theValue2' },
  beforeSend:function(){
    // this is where we append a loading image
    $('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
  },
  success:function(data){
    // successful request; do something with the data
    $('#ajax-panel').empty();
    $(data).find('item').each(function(i){
      $('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
    });
  },
  error:function(){
    // failed request; give feedback to user
    $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
  }
});

The requesting page should have a div with id="ajax-panel"

You must use Jquery with Ajax...

<script>
$("#submit").click(function()
    {
       var name = $('#name').value();
       var age= $('#age').value();
       var message= $('#message').value();

        $.ajax({ 
            url: "urpage.php",
            data: {name : name, age : age, message : message},
            type: "POST",               
            success: function(output) {

               alert(output); //This will show ur output in an alert box
                   }                }
        })

    });
</script>

Hope this works

本文标签： javascriptHow to get and pass data from html to php using ajaxStack Overflow