html post in AJAX

Door Jennifer Van W op 19-04-2015 13:53

1.107 views

Hi.

Dit is mijn script:


<script type="text/javascript">
   $(document).ready(function() {
        

        $("input[name='saveAjax']").on("click", function(e){
            e.preventDefault();
		
            $.ajax({
                url: "<?php echo site_url('products/edit') ?>",
               type: "POST",
               dataType: "html",
               data: $('#productForm').serialize(),
               
               success: function(){
	          console.re.log($('#productForm').serialize());
                  alert( "<?php echo $product->product_name_eng; ?> has been Saved" );
            }
            });
        });
    });
</script>

dit is de post van de html:

information_eng=%3Ch3%3E%3Cspan+style%3D%22font-size%3A+1.17em%3B%22%3EAppliance%3C%2Fspan%3E%3C%2Fh3%3E%0D%0A%0D%0A%3Cul%3E%0D%0A%09%3Cli%3E%3Cspan%3EBrand%3A%3C%2Fspan%3EAlcatel%3C%2Fli%3E%0D%0A%09%3Cli%3E%3Cspan%3EModel%3A%3C%2Fspan%3EOne+Touch+Pop+C9%3C%2Fli%3E%0D%0A%09%3Cli%3E%3Cspan%3EOperating+system%3A%3C%2Fspan%3EAndroid%3C%2Fli%3E%0D%0A%09%3Cli%3E%3Cspan%3EColor%3A%3C%2Fspan%3EBlack%3C%2Fli%3E%0D%0A%09%3Cli%3E%3Cspan%3EOperating+system+version%3A%3C%2Fspan%3E4.2+Jelly+Bean%3C%2Fli%3E%0D%0A%09%3Cli%3E%3Cspan%3EProcessor%3A%3C%2Fspan%3EQuad+Core+1.3gHz%3C%2Fli%3E%0D%0A%09%3Cli%3E%3Cspan%3EWeight%3A%3C%2Fspan%3E112+grams%3C%2Fli%3E%0

enz.....

Weet iemand hoe ik hiervan normale html code kan "posten", ik dacht zelf dat dataType=html voldoende was, maar niet dus ;-(

Thomas van den Heuvel

19-04-2015 14:06 gewijzigd op 19-04-2015 14:12

Allereerst: dataType is een "hint" die aangeeft wat je terug verwacht, NIET wat je verstuurt.

Een betere controle zou zijn dat je terugrapporteert wat ontvangen is. Hiermee sla je twee vliegen in een klap:

1. je ziet wat voor data is ontvangen
2. superglobals ($_POST, $_GET et cetera) hebben de (fijne) eigenschap dat ze automatisch hun data url-decoden; die gibberish die je hierboven ziet is om de data veilig te transporteren, hier heb je normaal gesproken als het goed is niet mee te maken.

Dus wat je zou kunnen doen (als information_eng het enige is wat je wilt inspecteren):
* druk in products/edit $_POST['information_eng'] af, zorg wel dat deze snippet HTML van de juiste character encodering wordt voorzien (bijvoorbeeld UTF-8)

* geef aan je success function een parameter "data" mee (of "html") (deze bevat de "feedback" van products/edit, oftewel de eerder afgedrukte HTML) en dump deze naar console of geef deze weer in een test-div.

EDIT: en als je meerdere "data elementen" hebt, zou je deze kunnen compartimenteren met JSON, je stopt dan in product/edit al je data in een array en roep je json_encode() hierover af. Je hebt dan wel een andere header nodig (application/json) en je dataType wordt dan... json :).

Jennifer Van W

19-04-2015 14:46

Thanks Thomas, zal me wat meer verdiepen in json

[size=xsmall]Toevoeging op 20/04/2015 08:11:13:[/size]

Goedemorgen (Thomas),

Ik kwam dit tegen:


var formData = JSON.stringify($("#myForm").serializeArray());

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

nog geen tijd om dit te testen, maar gevoelsmatig komt dit aardig overeen hetgeen je omschrijft. Het zijn meerdere "data elementen" die ik POST

Reageren

Inloggen om te reageren