Добавление данных в xml файл при помощи ajax. Без перезагрузки страницы

411

23 декабря 2016, 16:26

Есть таблица в которую загружаются данные из xml. Нужно сделать что бы эти данные можно было добавлять без перезагрузки страницы. Почитал про ajax, понял что нужно передавать строку со всеми тегами и содержимым внутри. Но как эти новые данные внести в xml и отобразить их без перезагрузки?

Файл xml.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="xslt.xslt"?>
<football xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<list1>
    <teams>
        <team_id>123</team_id>
        <team_name>asd</team_name>
        <team_location>asdasdasda</team_location>
    </teams>
</list1>
</football>

Файл xslt.xslt

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
            <xsl:template match="/">
            <html>
                <head>
            <script>
                function callServer() {
              var team_id = document.getElementById("team_id").value;
              var team_name = document.getElementById("team_name").value;
              var team_location = document.getElementById("team_location").value;
               var xhr;  
                 if (window.XMLHttpRequest) 
                 {
                    xhr = new XMLHttpRequest();  
                } 
                else if (window.ActiveXObject) 
                { 
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
                }
              var xmlString = "<list1>" + "<teams>" +
                "  <team_id>" + escape(firstName) + "</team_id>" +
                "  <team_name>" + escape(lastName) + "</team_name>" +
                "  <team_location>" + escape(street) + "</team_location>" +
                "</teams>" + "</list1>";

              var url = "teams.php";

              xhr.open("POST", url, true);

              xhr.setRequestHeader("Content-Type", "text/xml");

              xhr.onreadystatechange = confirmUpdate;

              xhr.send(xmlString);
            }
            </script>
                </head>
                <body>
                    <form  name="form1" method="post" action="teams.php" id="form1">
                        team_id         <input type="text" name="team_id" id="team_id"/><br/>
                        team_name       <input type="text" name="team_name" id="team_name"/><br/>
                        team_location   <input type="text" name="team_location" id="team_location"/>
                        <br/>
                        <input type="submit" name="submitOneAdd" value="Добавить запись1" onclick="callServer()"/>
                        <input type="submit" name="submitOneDelete" value="Удалить запись1"/>
                        <input type="submit" name="submitOneChange" value="Изменить запись1"/>
                        <br/>
                        delete          <input type="text" name="delete" id="delete"/>
                        </form>
                        <!-- Таблица teams (начало) -->
                        <h2>teams</h2> 
                        <table class="sortable">
                            <thead>
                                <tr>
                                    <th class="text-left">No</th>
                                    <th class="text-left">team_id</th>
                                    <th class="text-left">team_name</th>
                                    <th class="text-left">team_location</th>
                                </tr>
                            </thead>
                            <tbody>
                                <xsl:for-each select="football/list1/teams">
                                    <tr>
                                        <xsl:if test="position() mod 2=1">
                                            <xsl:attribute name="style">background-color: pink;</xsl:attribute>
                                        </xsl:if>
                                        <td><xsl:value-of select="position()"/></td>
                                        <td><xsl:value-of select="team_id"/></td>
                                        <td><xsl:value-of select="team_name"/></td>
                                        <td><xsl:value-of select="team_location"/></td>
                                    </tr>
                                </xsl:for-each>
                            </tbody>
                        </table>
                        <p>Всего элементов: <xsl:value-of select="count(football/list1/teams)"/></p>
                        <!-- Таблица teams (конец) -->
                </body>
            </html>
            </xsl:template>
            </xsl:stylesheet>

Файл teams.php

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title></title>
            </head>
            <body>
            <?php


            if ( isset( $_POST[submitOneAdd] ) ) 
            {
                $dom = new DOMDocument();
                $dom = DOMDocument::load('xml.xml');
                $list1 = $dom->createElement('list1');
                $teams1 = $dom->createElement('teams');
                $team_id = $dom->createElement('team_id');
                $team_name = $dom->createElement('team_name');
                $team_location = $dom->createElement('team_location');
                $team_id_text = $dom->createTextNode($_POST['team_id']);
                $team_id->appendChild($team_id_text);
                $teams1->appendChild($team_id);
                $team_name_text = $dom->createTextNode($_POST['team_name']);
                $team_name->appendChild($team_name_text);
                $teams1->appendChild($team_name);
                $team_location_text = $dom->createTextNode($_POST['team_location']);
                $team_location->appendChild($team_location_text);
                $teams1->appendChild($team_location);
                $list1->appendChild($teams1);
                $dom->documentElement->appendChild($list1);
                $dom->save('xml.xml');
                // echo 'Запись добавлена!1';
            }
?>
            <meta http-equiv="refresh" content="0; url=xml.xml">
            </body>
            </html>

Answer 1

Берём JQuery, и пишем.

$('#delete').click(function() { 
  $.get( 
    "/ajaxtest.php", { 
      team_id: $('#team_id').attr('value'), 
      team_name: $('#team_name').attr('value'), 
      team_location: $('#team_location').attr('value'), 
    }, 
    onAjaxSuccess 
  ); 
 
  function onAjaxSuccess(data) { 
    console.log('Всё ок.'); 
  } 
})