Wenn ein Benutzer das Formular auf meiner Seite sendet, verwende ich AJAX, um die Informationen zu senden, ohne die Seite zu aktualisieren. Nachdem der Benutzer die Informationen übermittelt hat, möchte ich eine bereits geschriebene PHP-Funktion ausführen, die die Informationen anzeigt. Ist dies möglich oder muss ich eine andere Ajax-Funktion ausführen, um danach zu aktualisieren?

    $(function () {
       $('add').on('submit', function (e) {
          $.ajax({
            type: 'post',
            url: 'submit.php',
            data: $('this').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          e.preventDefault();
          updateWords(); //PHP FUNCTION
        });
      });
1
user934902 9 Dez. 2013 im 19:32

5 Antworten

Beste Antwort

Sie müssen einen weiteren AJAX-Aufruf ausführen, wenn der erste erfolgreich ist.

JavaScript kann nicht direkt mit PHP interagieren und daher können Sie keine PHP-Funktion über die Erfolgs- / Vollständigkeitsfunktion des AJAX-Aufrufs aufrufen.

2
Ryan 9 Dez. 2013 im 15:34

PHP ist serverseitig, Javascript ist clientseitig. Sie können PHP nicht vom Client aus aufrufen, wenn die Seite bereits geladen ist.

Der einfache Weg ist also Ajax

In der submit.php hinzufügen:

echo json_encode($_POST);

Oder der

PHP-Funktion, die ich bereits geschrieben habe

... die Informationen, was Sie brauchen.

Und in der Erfolgsfunktion

success: function () {
 // i don't use jquery but the response contains the json string
 console.log('the words you wanna update:',JSON.parse(response));
 // updateWords(JSON.parse(response));
}

BEARBEITEN

Sie benötigen auch nicht mehr als eine Ajax-Funktion

Sie sagen, Sie haben bereits ein Skript geschrieben, um dem Client die nächsten Informationen anzuzeigen.

Fügen Sie dieses Skript zur Datei submit.php hinzu

Und die Erfolgsfunktion gibt Ihnen das, was Sie als Antwort benötigen.

Ich habe Echo json_encode($_POST); hinzugefügt, da die meiste Zeit als Antwort- / Aktualisierungsinformation diejenige ist, die Sie gerade gepostet haben.

0
cocco 9 Dez. 2013 im 16:04

Sie sollten die Ajax-Funktion verwenden, die die Aktualisierungsinformationen ausführt, um die Seite selbst gleichzeitig zu aktualisieren.

Geben Sie einfach verwendbares HTML als Rückgabe vom Ajax zurück und verwenden Sie dieses als HTML-Inhalt der Seite.

Beispiel: test.php

<script>
  function updateName() {
    var url = './test.php?inpName='  + $('#inpName').val();
    $.get( url, function( data ) {
    $( "#frmDivUpdate" ).html( data );
      alert( "Call was performed." );
    });
  }
  </script>


  <div id="frmDivUpdate">
    <form>
      Enter your name : <input name="inpName" id="inpName">
      <br>
      <input type="button" onClick="updateName();" value="Update">
    </form>
  </div>

  <?php 

  if (isset($_GET))
  {
      $inpName = $_GET["inpName"];
      echo "You updated your val to $inpName";
  }
  ?>
0
bmccall1 9 Dez. 2013 im 15:44

Wenn die Funktion vom AJAX-Aufruf zum Beenden von submit.php abhängig ist, erstellen Sie einen neuen AJAX-Aufruf. Wenn nicht, hängen Sie die Funktion einfach an submit.php an und rufen Sie sie am Ende der Datei auf.

0
Xarus 9 Dez. 2013 im 15:38

Als Antwort darauf.

Ich habe mehrere Formulare auf der Seite und wahrscheinlich 5 verschiedene Ajax-Aufrufe, bei denen nicht mehr als 2 gleichzeitig aufgerufen werden. Wenn json besser ist, haben Sie einen Link zu einem ähnlichen Lesematerial oder einem zusätzlichen Stapelbeispiel, damit ich unterrichten kann ich selbst - user934902

Zuerst

Jquery wurde für alte Browser erstellt, um grundlegende Funktionen zu unterstützen, die ie6 nicht unterstützt

Die Verwendung von jquery ist gut, wenn Sie volle Unterstützung für fast alle Browser haben möchten

Es gibt aber auch viele schlechte Seiten:

  1. Es ist 81kb Code, der verrückt ist (ohne Plugins)
  2. Es ist sehr langsam im Vergleich zu nativen Funktionen.
  3. Es wird von Leuten verwendet, die nicht wissen, wie man einfaches Javascript schreibt.
  4. und vieles mehr, wenn wir über die Plugins sprechen.

Jetzt befinden wir uns in einer Ära, in der die meisten Menschen ihre mobilen Geräte und modernen Browser verwenden, die Standard-Javascript 1.7 unterstützen. Android, iOS, Safari, Internet Explorer 10, Chrome, Opera und Firefox unterstützen Javascript 1.7

http://caniuse.com/

Der folgende Code wird von diesen Browsern unterstützt.

Dies ist eine von mir geschriebene Ajax-Funktion, die Post & Get behandelt

Weitere Informationen zu dieser Funktion finden Sie hier https://stackoverflow.com/a/18309057/2450730

 function ajax(a,b,e,d,f,g,c){
  c=new XMLHttpRequest;
  !f||(c.upload.onprogress=f);
  !g||(c.onprogress=g);
  c.onload=b;
  c.open(e||'get',a);
  c.send(d||null)
 }
 // Params:
 // Url,callback,method,formdata or {key:val},uploadFunc,downloadFunc,placeholder

Eine einfache Get-Anfrage wäre

ajax('example.php',responseFunction);

Und eine komplexe Postfunktion wäre

ajax('example.php',responseFunction,'post',new FormData(form),uploadFunc,dlFunc);

Du brauchst das.

Also, wenn Sie Ihr Formular haben

<form id="myForm">
<input name="name"> Name
<input name="surname"> Surname
<input name="mail"> Email
<input name="file" type="file" multiple> File/Files
</form>

Sie müssen nur eine solche Funktion schreiben

var form=document.getElementsById('myForm');
form.onsubmit=function(e){
 e.preventDefault();
 ajax('submit.php',SUCCESS,'post',new FormData(this));
}

Und hier kommen wir zu Ihrer Frage:

Erstellen Sie die Datei submit.php für Ihre Anforderungen

<?php
 // do whatever you need with the posted info 
 // copy files to a specific folder
 // insert/update/delete the database
 // check for errors
 // lets say no errors 
 $err=array(); 
 // load extra info from database to an array called $extrainfo
 // load some functions... (you can do what you want here)
 // like executing the function you have already written and add that info to 
 // the $extrainfo.
 $extrainfo=array('updated correctly','files copied');
 $data=array('post'=>$_POST,'files'=>$_FILES,'info'=>$extrainfo,'errors'=>$err);
 echo json_encode($data);
?>

Dies gibt ein json-codiertes Array zurück, das später in Javascript verwendet werden soll.

Jetzt müssen wir diesen JSON ausarbeiten. in der SUCCESS-Funktion

function SUCCESS(){
 var data=JSON.parse(this.response);
 if(data.errors.length>0){
  // you have some errors 

 }else{
  // no errors
  // display your response in a proper way.
  console.log(data);
 }
}

Innerhalb dieser Funktion müssen Sie nur basierend auf den Antwortdaten anzeigen.

data enthält alles, was Sie brauchen.

Hier ist der ganze Code.

Kopiere und füge es in eine txt-Datei ein und speichere es als submit.php. Ich habe vorerst nur in Chrom getestet.

<?php
if($_POST){
$err=array();
$extrainfo=array('updated correctly','files copied');
$data=array('post'=>$_POST,'files'=>$_FILES,'info'=>$extrainfo,'errors'=>$err);
echo json_encode($data);
}else{
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>upload</title>
<script>
var form,result;
function ajax(a,b,e,d,f,g,c){
 c=new XMLHttpRequest;
 !f||(c.upload.onprogress=f);
 !g||(c.onprogress=g);
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}
function SUCCESS(){
    console.log(JSON.parse(this.response));
 var data=JSON.parse(this.response);
 if(data.errors.length>0){
  result.textContent='you have some errors:'+data.errors[0];
 }else{
  result.textContent=JSON.stringify(data, null, '\t');
 }
}
window.onload=function(){
 form=document.getElementById('myForm');
 result=document.getElementById('response');
 form.onsubmit=function(e){
  e.preventDefault();
  ajax('submit.php',SUCCESS,'post',new FormData(this));
 }
}
</script>
</head>
<body>
<form id="myForm">
<input name="name"> Name
<input name="surname"> Surname
<input name="mail"> Email
<input name="file[]" type="file" multiple> File/Files
<input type="submit" value="send">
</form>
<pre id="response"></pre>
</body>
</html>
<?php
}
?>
3
Community 23 Mai 2017 im 12:06