{"id":2970,"date":"2017-07-29T13:25:25","date_gmt":"2017-07-29T10:25:25","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/javascript-xmlhttprequest-post-requests-make-simple-comment-form-with-ajax\/"},"modified":"2020-04-08T19:31:26","modified_gmt":"2020-04-08T16:31:26","slug":"javascript-xmlhttprequest-post-requests-make-simple-comment-form-with-ajax","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/javascript-xmlhttprequest-post-requests-make-simple-comment-form-with-ajax\/","title":{"rendered":"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_fullwidth_header title=&#8221;JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax&#8221; content_max_width=&#8221;none&#8221; _builder_version=&#8221;3.16&#8243; button_one_letter_spacing_hover=&#8221;0&#8243; button_two_letter_spacing_hover=&#8221;0&#8243; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;0&#8243; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;0&#8243; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; custom_padding=&#8221;0px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;4.4.2&#8243; custom_padding=&#8221;0px|||&#8221; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;3.27.4&#8243; border_style=&#8221;solid&#8221;]In last <a href=\"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript-intro-to-ajax-xmlhttprequest\/\">lesson<\/a> we considered GET requests with xmlhttprequest. In this lesson we&#8217;ll discuss how to make post requests with this object.<br \/>\n[\/et_pb_text][et_pb_video src=&#8221;https:\/\/www.youtube.com\/watch?v=HSkxOO6Kxwg&#8221; _builder_version=&#8221;3.0.64&#8243;][\/et_pb_video][et_pb_text _builder_version=&#8221;3.27.4&#8243; border_style=&#8221;solid&#8221;]The differences between GET and POST is the way to pass data. IN GET data is passed in url. IN POST data is passed in request body. Furthermore you must set http header with setRequestHeader method.<br \/>\nIt is important to remember that we work with user&#8217;s data. That&#8217;s why we must protect our projects. You need to use encodeURIComponent method to remove unwanted data. During call send method you must pass body parameter. In example below this is body variable.<br \/>\n[\/et_pb_text][et_pb_text _builder_version=&#8221;3.27.4&#8243; border_style=&#8221;solid&#8221;]Also we&#8217;ll make little pretty project &#8211; simple comment form.<br \/>\nTask description: we enter comment text and this text inserts to database and reads from database to page with list comments.<br \/>\n[\/et_pb_text][et_pb_comments _builder_version=&#8221;4.4.2&#8243; custom_margin=&#8221;30px||||false|false&#8221;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In last lesson we considered GET requests with xmlhttprequest. In this lesson we&#8217;ll discuss how to make post requests with this object. The differences between GET and POST is the way to pass data. IN GET data is passed in url. IN POST data is passed in request body. Furthermore you must set http header [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[256,219],"tags":[241,230,240],"class_list":["post-2970","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials","tag-ajax-en","tag-javascript-en","tag-php-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax - Kamil Abzalov blog<\/title>\n<meta name=\"description\" content=\"In this lesson we continue to discuss xmlhttprequest - we consider post requests. We also will make simple ajax comment form.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax - Kamil Abzalov blog\" \/>\n<meta property=\"og:description\" content=\"In this lesson we continue to discuss xmlhttprequest - we consider post requests. We also will make simple ajax comment form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-29T10:25:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-08T16:31:26+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax\" \/>\n<meta name=\"twitter:description\" content=\"In this lesson we continue to discuss xmlhttprequest - we consider post requests. We also will make simple ajax comment form.\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax\",\"datePublished\":\"2017-07-29T10:25:25+00:00\",\"dateModified\":\"2020-04-08T16:31:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/\"},\"wordCount\":462,\"commentCount\":0,\"keywords\":[\"ajax\",\"javascript\",\"php\"],\"articleSection\":[\"JavaScript\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/\",\"name\":\"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax - Kamil Abzalov blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-07-29T10:25:25+00:00\",\"dateModified\":\"2020-04-08T16:31:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"In this lesson we continue to discuss xmlhttprequest - we consider post requests. We also will make simple ajax comment form.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/javascript-xmlhttprequest-post-and-comment-form\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax - Kamil Abzalov blog","description":"In this lesson we continue to discuss xmlhttprequest - we consider post requests. We also will make simple ajax comment form.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax - Kamil Abzalov blog","og_description":"In this lesson we continue to discuss xmlhttprequest - we consider post requests. We also will make simple ajax comment form.","og_url":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-07-29T10:25:25+00:00","article_modified_time":"2020-04-08T16:31:26+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax","twitter_description":"In this lesson we continue to discuss xmlhttprequest - we consider post requests. We also will make simple ajax comment form.","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax","datePublished":"2017-07-29T10:25:25+00:00","dateModified":"2020-04-08T16:31:26+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/"},"wordCount":462,"commentCount":0,"keywords":["ajax","javascript","php"],"articleSection":["JavaScript","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/","url":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/","name":"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax - Kamil Abzalov blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-07-29T10:25:25+00:00","dateModified":"2020-04-08T16:31:26+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"In this lesson we continue to discuss xmlhttprequest - we consider post requests. We also will make simple ajax comment form.","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/javascript-xmlhttprequest-post-and-comment-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"JavaScript. XMLHttpRequest. POST requests. Make simple comment form with ajax"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/2970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=2970"}],"version-history":[{"count":13,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/2970\/revisions"}],"predecessor-version":[{"id":31757,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/2970\/revisions\/31757"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=2970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=2970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=2970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}