Question

让单选按钮触发不同的PHP函数..但是，当时点击提交按钮时页面会闪烁！

它看起来.PHP需要蠢蠢欲动!!

希望函数在没有页面刷新的情况下执行，因此AJAX ..

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

HTML PAGE：

<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 PAGE：

<!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 SCRIPT（感谢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);
  }

感谢您的光临

Answer 1

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

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

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

1 个答案: