使用 AJAX 交替 PHP 表单字段功能的单选按钮答案

【问题标题】：Radio Buttons Alternating PHP Form Field Function with AJAX使用 AJAX 交替 PHP 表单字段功能的单选按钮
【发布时间】：2013-05-10 13:19:16
【问题描述】：

有单选按钮来触发不同的 PHP 函数。但目前，当点击提交按钮时页面只是闪烁！

.PHP 似乎需要调整！！

希望在不刷新页面的情况下执行这些功能，因此使用 AJAX..

当单击提交按钮（返回）时，表单字段应向 PHP 提交一个字符串，取决于所选的单选按钮。

http://bootply.com/61461

HTML 页面：

<div class="container">

  <!-- Input Section -->
  <form action="">
    <fieldset>
      <legend>A Form to input plain English and output Pig Latin</legend>
      <label></label>
      <input class="span9" type="text" id="txt1" name="yourText" placeholder="… Type Something Here …"><br><br>
      <span class="help-block">Choose whether or not you want to have the English input echoed on the output as Pig Latin:</span>
      <label class="radio inline">
      <input type="radio" name="optionsRadios" id="english" value="english" checked>
      Echo the English Input
      </label>
      <label class="radio inline">
      <input type="radio" name="optionsRadios" id="piglatin" value="piglatin">
      Output as Pig Latin
      </label>
      <br><br>
      <button type="submit" class="btn" onClick="showTxt(this.value)">Return</button>
    </fieldset>
  </form>

  <br><br><br>

  <!-- Output Section -->
  <span id="return-text">
    <p>Text Will Post Here</p>
  </span>

</div>

PHP 页面：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Pig Latin PHP</title>
  </head>

  <body>

    <?php
    if( isset($_POST['yourText'])){
        $text = $_POST['yourText'];
    }
    function engish(){
        if( isset($_POST['optionsRadios']) &&
        $_POST['optionsRadios'] == 'english'){
            echo $text;
        }
    }
    function piglatin(){
        if( isset($_POST['optionsRadios']) &&
        $_POST['optionsRadios'] == 'piglatin'){
            echo '…pig latin php operation to be written…';
        }
    }
    echo english();
    echo piglatin();
    ?>

  </body>
</html>

AJAX 脚本（感谢 ogc-nick 的回答）：

<!-- AJAX Call to piglatin.php -->
<script>
  function showTxt(str)
  {
  var xmlhttp;
  if (str.length==0)
    { 
    document.getElementById("return-text").innerHTML="";
    return;
    }
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("return-text").innerHTML=xmlhttp.responseText;
      }
    }
  xmlhttp.open("POST","piglatinajax.php", true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  var dataString = $('form').serialize();
    xmlhttp.send(dataString);
  }

感谢收看

【问题讨论】：

标签： php ajax forms twitter-bootstrap radio-button

【解决方案1】：

看起来您的请求正在发送 $_GET 变量 q 中的数据，但您的 php 正在寻找索引。您需要像这样在发送方法中添加发布数据

var optionsRadios = document.forms[formname].optionsRadios.value; 
var yourText = document.forms[formname].yourText.value; 
xmlhttp.send("optionsRadios=" + optionsRadios + "&yourText=" + yourText);

参考：http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

【讨论】：

谢谢，感谢.. .php 页面应该是什么样子？
您的想法是正确的，只要确保您在 javascript 发送方法中拥有的任何数据都将最终出现在 $_POST 数组中，并且您在 ? 之后的请求 URL 后面的任何内容都将位于$_GET 数组中。在您发布的代码中。您的 php 脚本唯一可用的数据是 $_GET['q']。
已更新问题.. 整个 PHP 页面.. 想法？
只需将 .send() 方法中的数据变成表单中的数据，然后加载它并查看它是否有效。
试过这个：xmlhttp.send("optionsRadios=value&yourText=value");