传递HTML表单值/加载.php文件

Question

I'm trying to pass the parameter of a form $_POST['txtBody'] into a div via jquery/javascript.

the PHP file to be loaded:

ajax-rewriter.php

<?php 
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    print_r($_POST);
    $articleBody = strtolower($_POST['txt']);
    echo "<pre><b>Original:</b><br /><br /><p>" . $articleBody . "</p></pre>";   
    $word       = "";
    $length     = strlen($articleBody);
    $OutputBody = "";
    for ($i = 0; $i < $length; $i++) {
        $word = $word . $articleBody[$i];
        if ($i == $length - 1)
            $comeCha = " ";
        else
            $comeCha = $articleBody[$i + 1];
        $retStr = getWordPattern($word, $comeCha, "syn/en.syn");
        if ($retStr != "") {
            $OutputBody .= $retStr;
            $word = "";
        }
    }
    echo "<br>";
    echo "<pre><b>Spun:</b><br /><br /><p>" . $OutputBody . $word . "</p></pre>";
}
?>

The HTML form:

    <div id="mainContent"></div>
        <div class="panel panel-primary">
            <div class="panel-heading">Your article rewriter API is: (<span class="results"><b>http://www.wraithseo.com/api.php?rewriter=1&key=<?php echo $user['api_key']; ?></b></span>)</div>
            <div class="panel-body">

                    <form id="frmAjax" action="rewriter.php" method="post" class="form-horizontal container-fluid" role="form">
                    <div class="row form-group">
                        <div class="col-sm-4 text-right"><label for="txtBody" class="control-label">Article:</label></div>
                        <div class="col-sm-8"><textarea class="form-control" id="txtBody" name="txtBody" required="required"></textarea></div>
                    </div>

                    <div class="row form-group">
                        <div class="col-sm-12 text-right">
                            <button type="submit" name="spinText" class="btn btn-default">Spin!</button>
                        </div>
                    </div>                      
                    </form>
            </div>
            <div class="panel-footer">Paste in an article above and hit <b>Spin</b>!</div>
        </div>
<script>
    $(document).ready(function(){
        $('#frmAjax').submit(function(e) {
          e.preventDefault(); // important so the submit doesn't clear the data...
          $.ajax({
                type: "POST",
                url: "ajax-rewriter.php",
                data:{ txt: <?php echo $_POST['txtBody']; ?> }
          })          
          $("#mainContent").load('ajax-rewriter.php')
        });
    });
</script>

I have tried but cannot remember the proper way to pass the $_POST['txtBody'] value to the loaded .php file and show it in the div

Any help would be appreciated.

Answer 1

So it looks like you want to send whatever is typed into the <textarea class="form-control" id="txtBody" name="txtBody" required="required"></textarea> element to be passed to the php file ajax-rewriter.php for processing via JQuery ajax, correct?

I don't think you should be trying to get from your $_POST variable inside your AJAX request. Rather, you're sending the value of the textarea through your AJAX request (which is utilizing the POST method to send the data).

Here is what I believe you are looking for:

   $(document).ready(function(){
        $('#frmAjax').submit(function(e) {
          var text = $('#txtBody').val();   // ADDED THIS
          e.preventDefault();
          $.ajax({
                type: "POST",
                url: "ajax-rewriter.php",
                data:{textData : text}      // MODIFIED THIS
          })          
          $("#mainContent").load('ajax-rewriter.php')
        });
    });

Then, in your php file, you can get the text variable through the $_POST variable:

$data = $_POST["textData"];

You can then choose what to do whatever you want with the data in your php file. If you are trying to send the data via ajax to php, modify it via php, then send it back as a response to the ajax request, look into JQuery's success and complete callback functions that are part of the JQuery ajax call.

Here is an example using the success callback:

   $.ajax({
        type: "POST",
        url: "email.php",
        data: {fullName, phoneNumber, email, comments, response},
        success: function(dataRetrieved){
            $("#response").html(dataRetrieved);
        }
    });

The php file email.php receives the data via $_POST through the ajax request, processes it, and then the email.php file will echo data as output from the server. The data that is echoed is sent back as a response to the ajax request, which can be retrieved as a parameter in the success callback.